Adding new colors to Deadline.

penske-media-corp · Jun 27, 2024 · 6787b84 · 6787b84
1 parent 61e3f34
commit 6787b84
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 2 deletions.
diff --git a/packages/larva-tokens/build/deadline.custom-properties.css b/packages/larva-tokens/build/deadline.custom-properties.css
diff --git a/packages/larva-tokens/build/deadline.json b/packages/larva-tokens/build/deadline.json
@@ -513,5 +513,9 @@
   "PRIMARY_L_LINE_HEIGHT_MOBILE": "34px",
   "BODY_L_LINE_HEIGHT_MOBILE": "initial",
   "FONT_FAMILY_ACCENT": "Verdana, serif",
-  "FONT_FAMILY_ACCENT_FANCY": "Verdana, sans-serif"
+  "FONT_FAMILY_ACCENT_FANCY": "Verdana, sans-serif",
+  "COLOR_LIGHT_GREY": "rgb(247, 247, 247)",
+  "COLOR_LIGHT_PINK": "rgb(245, 223, 221)",
+  "COLOR_LIGHT_BEIGE": "rgb(239, 235, 220)",
+  "COLOR_LIGHT_BLUE": "rgb(241, 248, 252)"
 }
diff --git a/packages/larva-tokens/build/deadline.map.scss b/packages/larva-tokens/build/deadline.map.scss
@@ -530,4 +530,8 @@ $deadline-map: (
   'body-l-line-height-mobile': (initial),
   'font-family-accent': (Verdana, serif),
   'font-family-accent-fancy': (Verdana, sans-serif),
+  'color-light-grey': (rgb(247, 247, 247)),
+  'color-light-pink': (rgb(245, 223, 221)),
+  'color-light-beige': (rgb(239, 235, 220)),
+  'color-light-blue': (rgb(241, 248, 252)),
 );
diff --git a/packages/larva-tokens/build/deadline.raw.json b/packages/larva-tokens/build/deadline.raw.json
@@ -4199,6 +4199,34 @@
       "category": "font-family",
       "originalValue": "Verdana, sans-serif",
       "name": "FONT_FAMILY_ACCENT_FANCY"
+    },
+    "COLOR_LIGHT_GREY": {
+      "category": "text-color",
+      "type": "color",
+      "value": "rgb(247, 247, 247)",
+      "originalValue": "rgb(247, 247, 247)",
+      "name": "COLOR_LIGHT_GREY"
+    },
+    "COLOR_LIGHT_PINK": {
+      "category": "text-color",
+      "type": "color",
+      "value": "rgb(245, 223, 221)",
+      "originalValue": "rgb(245, 223, 221)",
+      "name": "COLOR_LIGHT_PINK"
+    },
+    "COLOR_LIGHT_BEIGE": {
+      "category": "text-color",
+      "type": "color",
+      "value": "rgb(239, 235, 220)",
+      "originalValue": "rgb(239, 235, 220)",
+      "name": "COLOR_LIGHT_BEIGE"
+    },
+    "COLOR_LIGHT_BLUE": {
+      "category": "text-color",
+      "type": "color",
+      "value": "rgb(241, 248, 252)",
+      "originalValue": "rgb(241, 248, 252)",
+      "name": "COLOR_LIGHT_BLUE"
     }
   }
 }
diff --git a/packages/larva-tokens/src/brands/deadline.json b/packages/larva-tokens/src/brands/deadline.json
@@ -187,6 +187,34 @@
 			"originalValue": "#616161",
 			"name": "COLOR_GREY_DARK"
 		},
+		"COLOR_LIGHT_BLUE": {
+			"category": "text-color",
+			"type": "color",
+			"value": "rgb(241, 248, 252)",
+			"originalValue": "#F1F8FC",
+			"name": "COLOR_LIGHT_BLUE"
+		},
+		"COLOR_LIGHT_GREY": {
+			"category": "text-color",
+			"type": "color",
+			"value": "rgb(247, 247, 247)",
+			"originalValue": "#F7F7F7",
+			"name": "COLOR_LIGHT_GREY"
+		},
+		"COLOR_LIGHT_PINK": {
+			"category": "text-color",
+			"type": "color",
+			"value": "rgb(245, 223, 221)",
+			"originalValue": "#F5DFDD",
+			"name": "COLOR_LIGHT_PINK"
+		},
+		"COLOR_LIGHT_BEIGE": {
+			"category": "text-color",
+			"type": "color",
+			"value": "rgb(239, 235, 220)",
+			"originalValue": "#EFEBDC",
+			"name": "COLOR_LIGHT_BEIGE"
+		},
 		"FONT_FAMILY_BODY": {
 			"category": "font-family",
 			"value": "Georgia, serif",

diff --git a/packages/larva-tokens/style-guides/deadline.html b/packages/larva-tokens/style-guides/deadline.html
@@ -7171,6 +7171,66 @@ <h1>Design Tokens</h1>
           The quick brown fox jumps over the lazy dog.
         </td>
 
+        <td></td>
+      </tr>
+
+      <tr>
+        <th scope="row">
+          <code>color-light-grey</code>
+        </th>
+        <td>
+          <code>rgb(247, 247, 247)</code>
+        </td>
+
+        <td style="background-color: #f6f6f6; color: rgb(247, 247, 247);">
+          The quick brown fox jumps over the lazy dog.
+        </td>
+
+        <td></td>
+      </tr>
+
+      <tr>
+        <th scope="row">
+          <code>color-light-pink</code>
+        </th>
+        <td>
+          <code>rgb(245, 223, 221)</code>
+        </td>
+
+        <td style="background-color: #f6f6f6; color: rgb(245, 223, 221);">
+          The quick brown fox jumps over the lazy dog.
+        </td>
+
+        <td></td>
+      </tr>
+
+      <tr>
+        <th scope="row">
+          <code>color-light-beige</code>
+        </th>
+        <td>
+          <code>rgb(239, 235, 220)</code>
+        </td>
+
+        <td style="background-color: #f6f6f6; color: rgb(239, 235, 220);">
+          The quick brown fox jumps over the lazy dog.
+        </td>
+
+        <td></td>
+      </tr>
+
+      <tr>
+        <th scope="row">
+          <code>color-light-blue</code>
+        </th>
+        <td>
+          <code>rgb(241, 248, 252)</code>
+        </td>
+
+        <td style="background-color: #f6f6f6; color: rgb(241, 248, 252);">
+          The quick brown fox jumps over the lazy dog.
+        </td>
+
         <td></td>
       </tr>
           </tbody>