Release v2.6.1 - staging → main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linode/design-language-system",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "type": "module",
   "module": "dist/index.js",
   "exports": {

style-dictionary/configs/getStyleDictionaryConfig.ts

@@ -20,13 +20,17 @@ export function getStyleDictionaryConfig(
     // If we want to show collisions, we can change `include` to `source`.
     include: theme.selectedTokenSets.map(tokenset => `tokens/${tokenset}.json`),
     preprocessors: ["tokens-studio"],
-    expand: {
-      typesMap: expandTypesMap,
+    log: {
+      warnings: 'warn',
+      verbosity: 'verbose',
+      errors: {
+        brokenReferences: 'throw',
+      },
     },
     platforms: {
       js: {
         transformGroup: 'tokens-studio',
-        transforms: ['name/pascal', 'size/px', 'color/hex', 'shadow/css/shorthand', 'typography/css/shorthand'],
+        transforms: ['name/pascal', 'color/hex', 'shadow/css/shorthand', 'typography/css/shorthand'],
         buildPath,
         prefix: `${PREFIX}-`,
         files: [
@@ -50,7 +54,7 @@ export function getStyleDictionaryConfig(
       },
       scss: {
         transformGroup: 'tokens-studio',
-        transforms: ['name/kebab', 'time/seconds', 'size/px', 'color/css', 'shadow/css/shorthand', 'typography/css/shorthand'],
+        transforms: ['name/kebab', 'time/seconds', 'color/css', 'shadow/css/shorthand', 'typography/css/shorthand'],
         buildPath,
         prefix: `${PREFIX}-`,
         files: [
@@ -62,7 +66,7 @@ export function getStyleDictionaryConfig(
       },
       css: {
         transformGroup: 'tokens-studio',
-        transforms: ['name/kebab', 'time/seconds', 'size/px', 'color/css', 'shadow/css/shorthand', 'typography/css/shorthand'],
+        transforms: ['name/kebab', 'time/seconds', 'color/css', 'shadow/css/shorthand', 'typography/css/shorthand'],
         buildPath,
         prefix: `${PREFIX}-`,
         files: [

tokens/alias/dark.json

@@ -163,6 +163,19 @@
         "value": "{global.color.neutrals.white}",
         "type": "color",
         "description": "Tooltip background"
+      },
+      "overlay": {
+        "value": "{global.color.neutrals.black}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.84",
+              "space": "lch"
+            }
+          }
+        }
       }
     },
     "interaction": {
@@ -449,25 +462,39 @@
           "blur": "6",
           "spread": "0",
           "color": "rgba(0,0,0,0.18)",
-          "type": "innerShadow"
+          "type": "dropShadow"
         },
         "type": "boxShadow"
       },
+      "s-inverted": {
+        "value": {
+          "x": "0",
+          "y": "-2",
+          "blur": "6",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.18)",
+          "type": "dropShadow"
+        },
+        "type": "boxShadow",
+        "description": "Inverted shadow for elements that appear above the component"
+      },
       "l": {
         "value": [
           {
             "x": "0",
             "y": "16",
             "blur": "32",
             "spread": "0",
-            "color": "rgba(0,0,0,0.18)"
+            "color": "rgba(0,0,0,0.18)",
+            "type": "dropShadow"
           },
           {
             "x": "0",
             "y": "4",
             "blur": "8",
             "spread": "0",
-            "color": "rgba(0,0,0,0.08)"
+            "color": "rgba(0,0,0,0.08)",
+            "type": "dropShadow"
           }
         ],
         "type": "boxShadow"

tokens/alias/light.json

@@ -215,6 +215,20 @@
       "neutralsubtle": {
         "value": "{global.color.neutrals.20}",
         "type": "color"
+      },
+      "overlay": {
+        "value": "{global.color.neutrals.black}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.24",
+              "space": "lch"
+            }
+          }
+        },
+        "description": "Page dimming when the modal component is active"
       }
     },
     "action": {
@@ -352,9 +366,22 @@
           "blur": "6",
           "spread": "0",
           "color": "rgba(58,59,63,0.18)",
-          "type": "innerShadow"
+          "type": "dropShadow"
+        },
+        "type": "boxShadow",
+        "description": "Default shadow for components, like notification banners, dropdowns, popups;"
+      },
+      "s-inverted": {
+        "value": {
+          "x": "0",
+          "y": "-2",
+          "blur": "6",
+          "spread": "0",
+          "color": "rgba(58,59,63,0.18)",
+          "type": "dropShadow"
         },
-        "type": "boxShadow"
+        "type": "boxShadow",
+        "description": "Inverted shadow for elements that appear above the component"
       },
       "l": {
         "value": [
@@ -363,17 +390,20 @@
             "y": "16",
             "blur": "32",
             "spread": "0",
-            "color": "rgba(58,59,63,0.18)"
+            "color": "rgba(58,59,63,0.18)",
+            "type": "dropShadow"
           },
           {
             "x": "0",
             "y": "4",
             "blur": "8",
             "spread": "0",
-            "color": "rgba(58,59,63,0.08)"
+            "color": "rgba(58,59,63,0.08)",
+            "type": "dropShadow"
           }
         ],
-        "type": "boxShadow"
+        "type": "boxShadow",
+        "description": "Shadow for modals"
       }
     },
     "typography": {
@@ -453,12 +483,20 @@
             "fontFamily": "{global.font.font-family.brand}",
             "fontWeight": "{global.font.font-weight.extrabold}",
             "fontSize": "{global.font.font-size.xxxs}",
-            "lineHeight": "{global.font.line-height.xxxs}",
-            "textCase": "{global.font.textcase.uppercase}",
-            "letterSpacing": "3%"
+            "lineHeight": "{global.font.line-height.xxxs}"
           },
           "type": "typography",
           "description": "Custom labels for content blocks"
+        },
+        "overline-letter-spacing": {
+          "value": "0.023rem",
+          "type": "typography",
+          "description": "Overline letter spacing"
+        },
+        "overline-text-case": {
+          "value": "{global.font.textcase.uppercase}",
+          "type": "typography",
+          "description": "Overline text case"
         }
       },
       "body": {
@@ -507,8 +545,7 @@
             "fontFamily": "{global.font.font-family.brand}",
             "fontWeight": "{global.font.font-weight.regular.normal}",
             "fontSize": "{global.font.font-size.xs}",
-            "lineHeight": "{global.font.line-height.xs}",
-            "paragraphSpacing": "8"
+            "lineHeight": "{global.font.line-height.xs}"
           },
           "type": "typography",
           "description": "For list items"
@@ -543,7 +580,7 @@
               "lineHeight": "{global.font.line-height.xxxs}"
             },
             "type": "typography",
-            "description": "Large buttons, list, segmented buttons, side navigation, small tabls"
+            "description": "Large buttons, list, segmented buttons, side navigation, small tables"
           },
           "xs": {
             "value": {
@@ -582,7 +619,7 @@
               "fontFamily": "{global.font.font-family.brand}",
               "fontWeight": "{global.font.font-weight.bold}",
               "fontSize": "{global.font.font-size.xxxs}",
-              "lineHeight": "14px"
+              "lineHeight": "0.875rem"
             },
             "type": "typography",
             "description": "Badge number"

tokens/global/global.json

@@ -952,6 +952,12 @@
           "type": "textCase"
         }
       }
+    },
+    "borderRadius": {
+      "none": {
+        "value": "0",
+        "type": "borderRadius"
+      }
     }
   }
 }