@pantheon-systems/pds-design-tokens 2.0.0-alpha.50 → 2.0.0-alpha.52

package/build/css/variables.dark.css

@@ -74,25 +74,28 @@
   --pds-color-banner-neutral-background: oklch(0.5103 0 0);
   --pds-color-banner-neutral-foreground: oklch(0.9702 0 0);
   --pds-color-card-background: oklch(0.2178 0 0);
-  --pds-color-code-block-dark-background: oklch(1.0000 0 0);
-  --pds-color-code-block-dark-foreground: oklch(1.0000 0 0);
-  --pds-color-code-block-dark-line-prefix: #9699A1;
-  --pds-color-code-block-dark-highlight: #474954;
-  --pds-color-code-block-light-background: #EFF0F0;
-  --pds-color-code-block-light-foreground: #3B3D45;
-  --pds-color-code-block-light-line-prefix: #686D78;
-  --pds-color-code-block-light-highlight: #DEDFE0;
-  --pds-color-datepicker-accent-foreground: oklch(0.6496 0.1590 270.95);
+  --pds-color-code-block-background: var(--pds-color-neutral-300);
+  --pds-color-code-block-foreground: oklch(1 0 0);
+  --pds-color-code-block-line-prefix: #9699a1;
+  --pds-color-code-block-syntax-punctuation: #c3c5c9;
+  --pds-color-code-block-syntax-function: #f5c43a;
+  --pds-color-code-block-syntax-keyword: #72c4ff;
+  --pds-color-code-block-syntax-string: #a0f76e;
+  --pds-color-code-block-syntax-boolean: #d18fff;
+  --pds-color-code-block-syntax-tag: #ff61ca;
+  --pds-color-code-block-syntax-deleted: #f8495d;
+  --pds-color-code-block-syntax-inserted: #a0f76e;
+  --pds-color-datepicker-accent-foreground: oklch(0.7049 0.1468 258.30);
   --pds-color-datepicker-range-background: oklch(0.2000 0.0400 268.00);
   --pds-color-datepicker-range-foreground: oklch(0.2178 0 0);
-  --pds-color-datepicker-selected-background: oklch(0.5256 0.1988 268.04);
+  --pds-color-datepicker-selected-background: oklch(0.7049 0.1468 258.30);
   --pds-color-datepicker-selected-foreground: oklch(0.2178 0 0);
   --pds-color-pagination-foreground-hover: oklch(1 0 0);
   --pds-color-pagination-foreground-active: oklch(0.9702 0 0);
   --pds-color-pagination-foreground-current: oklch(1 0 0);
   --pds-color-pagination-background-hover: oklch(0.2603 0 0);
   --pds-color-pagination-background-active: oklch(0.2000 0.0400 268.00);
-  --pds-color-pagination-background-current: oklch(0.5256 0.1988 268.04);
+  --pds-color-pagination-background-current: oklch(0.7049 0.1468 258.30);
   --pds-color-panel-sunken-background: oklch(0.2603 0 0);
   --pds-color-expansion-panel-hover: oklch(0.2931 0 0);
   --pds-color-expansion-panel-open: oklch(0.2931 0 0);
@@ -116,7 +119,7 @@
   --pds-color-spinner-critical-secondary-2: #de2e21;
   --pds-color-spinner-critical-secondary-3: transparent;
   --pds-color-table-sort-icon-inactive: oklch(0.5 0 0);
-  --pds-color-tabs-border: oklch(0.3329 0 0);
+  --pds-color-tabs-border: oklch(0.5991 0 0);
   --pds-color-tag-orange-background: oklch(0.3382 0.1012 42.43);
   --pds-color-tag-orange-foreground: oklch(0.9175 0.0328 49.33);
   --pds-color-tag-stone-background: oklch(0.4022 0.0071 84.59);
@@ -201,10 +204,10 @@
   --pds-color-button-brand-background-hover: oklch(0.7640 0.1510 84.30);
   --pds-color-button-brand-background-active: oklch(0.6723 0.1329 84.30);
   --pds-color-button-brand-foreground: oklch(0.2178 0 0);
-  --pds-color-button-highlight-background-default: oklch(0.5256 0.1988 268.04);
-  --pds-color-button-highlight-background-hover: oklch(0.4293 0.1892 266.63);
-  --pds-color-button-highlight-background-active: oklch(0.3778 0.1665 266.63);
-  --pds-color-button-highlight-foreground: oklch(1.0000 0 0);
+  --pds-color-button-highlight-background-default: oklch(0.7049 0.1468 258.30);
+  --pds-color-button-highlight-background-hover: oklch(0.6049 0.1468 258.30);
+  --pds-color-button-highlight-background-active: oklch(0.5549 0.1468 258.30);
+  --pds-color-button-highlight-foreground: oklch(0.2178 0 0);
   --pds-color-button-critical-background-default: oklch(0.5338 0.1771 25.54);
   --pds-color-button-critical-background-hover: oklch(0.4501 0.1581 26.35);
   --pds-color-button-critical-background-active: oklch(0.3961 0.1391 26.35);
@@ -245,7 +248,7 @@
   --pds-color-split-button-primary-separator: oklch(0.2178 0 0);
   --pds-color-split-button-secondary-separator: oklch(0.4091 0 0);
   --pds-color-segmented-button-background-inactive: oklch(0.2931 0 0);
-  --pds-color-segmented-button-background-active: oklch(0.5256 0.1988 268.04);
+  --pds-color-segmented-button-background-active: oklch(0.7049 0.1468 258.30);
   --pds-color-segmented-button-foreground-inactive: var(--pds-color-foreground-default-secondary);
   --pds-color-segmented-button-foreground-active: var(--pds-color-foreground-reverse);
   --pds-color-category-ai-foreground: oklch(0.9559 0.0143 308.29);
@@ -319,27 +322,27 @@
   --pds-color-input-placeholder: oklch(0.6830 0 0);
   --pds-color-input-file-upload-button-background-default: oklch(0.2931 0 0);
   --pds-color-input-file-upload-button-background-hover: oklch(0.3329 0 0);
-  --pds-color-input-selected-background: oklch(0.6496 0.1590 270.95);
+  --pds-color-input-selected-background: oklch(0.7049 0.1468 258.30);
   --pds-color-input-selected-foreground: oklch(1.0000 0 0);
   --pds-color-input-switch-icon: oklch(0.8452 0 0);
   --pds-color-input-tag-background-default: oklch(0.38 0 0);
   --pds-color-input-tag-background-hover: oklch(0.32 0 0);
-  --pds-color-input-tag-background-active: oklch(0.6496 0.1590 270.95);
+  --pds-color-input-tag-background-active: oklch(0.7049 0.1468 258.30);
   --pds-color-input-tag-foreground-default: oklch(0.9702 0 0);
   --pds-color-input-tag-foreground-hover: oklch(0.9702 0 0);
   --pds-color-input-tag-foreground-active: oklch(0.9702 0 0);
-  --pds-color-input-tag-outline-active: oklch(0.6496 0.1590 270.95);
-  --pds-color-interactive-focus: oklch(0.6496 0.1590 270.95);
-  --pds-color-interactive-link-default: oklch(0.6496 0.1590 270.95);
+  --pds-color-input-tag-outline-active: oklch(0.7049 0.1468 258.30);
+  --pds-color-interactive-focus: oklch(0.7049 0.1468 258.30);
+  --pds-color-interactive-link-default: oklch(0.6478 0.1736 258.63);
   --pds-color-interactive-link-hover: oklch(0.6707 0.1296 32.99);
   --pds-color-interactive-link-active: oklch(0.7480 0.1030 37.44);
-  --pds-color-interactive-link-visited: oklch(0.6496 0.1590 270.95);
-  --pds-color-interactive-foreground-current: oklch(0.6496 0.1590 270.95);
-  --pds-color-interactive-foreground-hover: oklch(0.6496 0.1590 270.95);
-  --pds-color-interactive-foreground-active: oklch(0.6496 0.1590 270.95);
+  --pds-color-interactive-link-visited: oklch(0.6478 0.1736 258.63);
+  --pds-color-interactive-foreground-current: oklch(0.7049 0.1468 258.30);
+  --pds-color-interactive-foreground-hover: oklch(0.7049 0.1468 258.30);
+  --pds-color-interactive-foreground-active: oklch(0.7049 0.1468 258.30);
   --pds-color-interactive-foreground-inactive: oklch(0.5991 0 0);
-  --pds-color-interactive-background-current: oklch(0.5256 0.1988 268.04);
-  --pds-color-interactive-background-current-foreground: oklch(1.0000 0 0);
+  --pds-color-interactive-background-current: oklch(0.7049 0.1468 258.30);
+  --pds-color-interactive-background-current-foreground: oklch(0.2178 0 0);
   --pds-color-interactive-background-hover: oklch(0.2603 0 0);
   --pds-color-interactive-background-active: oklch(0.2931 0 0);
   --pds-color-interactive-background-selected: oklch(0.2000 0.0400 268.00);

package/build/css/variables.light.css

@@ -74,14 +74,17 @@
   --pds-color-banner-neutral-background: oklch(0.2178 0 0);
   --pds-color-banner-neutral-foreground: oklch(1.0000 0 0);
   --pds-color-card-background: oklch(1.0000 0 0);
-  --pds-color-code-block-dark-background: var(--pds-color-surface-reverse);
-  --pds-color-code-block-dark-foreground: var(--pds-color-foreground-reverse);
-  --pds-color-code-block-dark-line-prefix: #9699A1;
-  --pds-color-code-block-dark-highlight: #474954;
-  --pds-color-code-block-light-background: #EFF0F0;
-  --pds-color-code-block-light-foreground: #3B3D45;
-  --pds-color-code-block-light-line-prefix: #686D78;
-  --pds-color-code-block-light-highlight: #DEDFE0;
+  --pds-color-code-block-background: var(--pds-color-neutral-800);
+  --pds-color-code-block-foreground: oklch(1 0 0);
+  --pds-color-code-block-line-prefix: #9699a1;
+  --pds-color-code-block-syntax-punctuation: #c3c5c9;
+  --pds-color-code-block-syntax-function: #f5c43a;
+  --pds-color-code-block-syntax-keyword: #72c4ff;
+  --pds-color-code-block-syntax-string: #a0f76e;
+  --pds-color-code-block-syntax-boolean: #d18fff;
+  --pds-color-code-block-syntax-tag: #ff61ca;
+  --pds-color-code-block-syntax-deleted: #f8495d;
+  --pds-color-code-block-syntax-inserted: #a0f76e;
   --pds-color-datepicker-accent-foreground: oklch(0.5256 0.1988 268.04);
   --pds-color-datepicker-range-background: oklch(0.9500 0.0300 268.00);
   --pds-color-datepicker-range-foreground: oklch(0.2178 0 0);
@@ -116,7 +119,7 @@
   --pds-color-spinner-critical-secondary-2: #F5B6B0;
   --pds-color-spinner-critical-secondary-3: transparent;
   --pds-color-table-sort-icon-inactive: oklch(0.78 0 0);
-  --pds-color-tabs-border: oklch(0.8761 0 0);
+  --pds-color-tabs-border: oklch(0.8047 0 0);
   --pds-color-tag-orange-background: oklch(0.9175 0.0328 49.33);
   --pds-color-tag-orange-foreground: oklch(0.3445 0.1414 29.23);
   --pds-color-tag-stone-background: oklch(0.9261 0.0144 84.58);
@@ -224,14 +227,14 @@
   --pds-color-button-reverse-secondary-background-active: oklch(0.3638 0 0);
   --pds-color-button-reverse-secondary-border: oklch(0.5103 0 0);
   --pds-color-button-reverse-secondary-foreground: oklch(1.0000 0 0);
-  --pds-color-close-button-foreground: oklch(0.5173 0 0);
+  --pds-color-close-button-foreground: oklch(0.5550 0.0020 247.86);
   --pds-color-close-button-background-default: rgba(255, 255, 255, 0.00);
   --pds-color-close-button-background-hover: #1717171a;
   --pds-color-icon-button-standard-background-default: rgba(255, 255, 255, 0.00);
   --pds-color-icon-button-standard-background-hover: #1717170d;
   --pds-color-icon-button-standard-border-default: #1717171f;
   --pds-color-icon-button-standard-border-hover: #17171726;
-  --pds-color-icon-button-standard-foreground: oklch(0.3791 0 0);
+  --pds-color-icon-button-standard-foreground: oklch(0.31 0 0);
   --pds-color-icon-button-critical-background-default: rgba(255, 255, 255, 0.00);
   --pds-color-icon-button-critical-background-hover: oklch(0.9740 0.0075 17.42);
   --pds-color-icon-button-critical-border-default: oklch(0.8859 0.0414 19.05);
@@ -313,7 +316,7 @@
   --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
   --pds-color-dropdown-top-border: #dfdfdf;
   --pds-color-foreground-default: oklch(0.2178 0 0);
-  --pds-color-foreground-default-secondary: oklch(0.5173 0 0);
+  --pds-color-foreground-default-secondary: oklch(0.5550 0.0020 247.86);
   --pds-color-foreground-reverse: oklch(1.0000 0 0);
   --pds-color-foreground-reverse-secondary: oklch(0.8452 0 0);
   --pds-color-input-placeholder: oklch(0.8047 0 0);
@@ -388,7 +391,7 @@
   --pds-color-status-discovery-background: oklch(0.9559 0.0143 308.29);
   --pds-color-status-discovery-background-hover: oklch(0.9077 0.0264 310.39);
   --pds-color-status-neutral-background: oklch(0.8761 0 0);
-  --pds-color-status-neutral-indicator: oklch(0.5173 0 0);
+  --pds-color-status-neutral-indicator: oklch(0.5550 0.0020 247.86);
   --pds-color-status-frozen-fill: oklch(0.5510 0.1014 242.56);
   --pds-color-status-disabled-fill: oklch(0.8047 0 0);
   --pds-elevation-button-primary-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);

package/build/css/variables.typography.css

@@ -18,7 +18,6 @@
   --pds-typography-lh-m: 150%;
   --pds-typography-lh-s: 130%;
   --pds-typography-lh-xs: 120%;
-  --pds-typography-lh-code: 180%;
   --pds-typography-size-2xs: 0.625rem;
   --pds-typography-size-xs: 0.75rem;
   --pds-typography-size-s: 0.875rem;

package/build/figma/tokens.json

@@ -1885,7 +1885,7 @@
           }
         },
         "700": {
-          "value": "#686868",
+          "value": "#727374",
           "type": "color",
           "$extensions": {
             "com.figma": {
@@ -1894,7 +1894,7 @@
           }
         },
         "800": {
-          "value": "#424242",
+          "value": "#303030",
           "type": "color",
           "$extensions": {
             "com.figma": {
@@ -6688,108 +6688,146 @@
         }
       },
       "code-block": {
-        "dark": {
-          "background": {
-            "value": "{color.light-mode.surface.reverse}",
+        "background": {
+          "value": "{color.light-mode.neutral.800}",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-code-block-background"
+              }
+            }
+          }
+        },
+        "foreground": {
+          "value": "#ffffff",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-code-block-foreground"
+              }
+            }
+          }
+        },
+        "line-prefix": {
+          "value": "#9699a1",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-code-block-line-prefix"
+              }
+            }
+          }
+        },
+        "syntax": {
+          "punctuation": {
+            "value": "#c3c5c9",
             "type": "color",
             "$extensions": {
               "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-dark-background"
+                  "WEB": "--pds-color-code-block-syntax-punctuation"
                 }
               }
             }
           },
-          "foreground": {
-            "value": "{color.light-mode.foreground.reverse}",
+          "function": {
+            "value": "#f5c43a",
             "type": "color",
             "$extensions": {
               "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-dark-foreground"
+                  "WEB": "--pds-color-code-block-syntax-function"
                 }
               }
             }
           },
-          "line-prefix": {
-            "value": "#9699A1",
+          "keyword": {
+            "value": "#72c4ff",
             "type": "color",
             "$extensions": {
               "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-dark-line-prefix"
+                  "WEB": "--pds-color-code-block-syntax-keyword"
                 }
               }
             }
           },
-          "highlight": {
-            "value": "#474954",
+          "string": {
+            "value": "#a0f76e",
             "type": "color",
             "$extensions": {
               "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-dark-highlight"
+                  "WEB": "--pds-color-code-block-syntax-string"
                 }
               }
             }
-          }
-        },
-        "light": {
-          "background": {
-            "value": "#EFF0F0",
+          },
+          "boolean": {
+            "value": "#d18fff",
             "type": "color",
             "$extensions": {
+              "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-light-background"
+                  "WEB": "--pds-color-code-block-syntax-boolean"
                 }
               }
             }
           },
-          "foreground": {
-            "value": "#3B3D45",
+          "tag": {
+            "value": "#ff61ca",
             "type": "color",
             "$extensions": {
               "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-light-foreground"
+                  "WEB": "--pds-color-code-block-syntax-tag"
                 }
               }
             }
           },
-          "line-prefix": {
-            "value": "#686D78",
+          "deleted": {
+            "value": "#f8495d",
             "type": "color",
             "$extensions": {
               "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-light-line-prefix"
+                  "WEB": "--pds-color-code-block-syntax-deleted"
                 }
               }
             }
           },
-          "highlight": {
-            "value": "#DEDFE0",
+          "inserted": {
+            "value": "#a0f76e",
             "type": "color",
             "$extensions": {
               "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-light-highlight"
+                  "WEB": "--pds-color-code-block-syntax-inserted"
                 }
               }
             }
@@ -7311,7 +7349,7 @@
       },
       "tabs": {
         "border": {
-          "value": "{color.light-mode.border.default-secondary}",
+          "value": "{color.light-mode.border.separator}",
           "type": "color",
           "$extensions": {
             "public": true,
@@ -10586,7 +10624,7 @@
         "highlight": {
           "background": {
             "default": {
-              "value": "#3b5bdb",
+              "value": "#64a0fa",
               "type": "color",
               "$extensions": {
                 "public": true,
@@ -10600,7 +10638,7 @@
               }
             },
             "hover": {
-              "value": "#213fb5",
+              "value": "#4681d8",
               "type": "color",
               "$extensions": {
                 "public": true,
@@ -10614,7 +10652,7 @@
               }
             },
             "active": {
-              "value": "#1a3498",
+              "value": "#3771c7",
               "type": "color",
               "$extensions": {
                 "public": true,
@@ -10629,7 +10667,7 @@
             }
           },
           "foreground": {
-            "value": "#ffffff",
+            "value": "#1a1a1a",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -12429,7 +12467,7 @@
       },
       "interactive": {
         "focus": {
-          "value": "#6c86ef",
+          "value": "#64a0fa",
           "type": "color",
           "$extensions": {
             "public": true,
@@ -12443,7 +12481,7 @@
         },
         "link": {
           "default": {
-            "value": "#6c86ef",
+            "value": "#468cf6",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -12482,7 +12520,7 @@
             }
           },
           "visited": {
-            "value": "#6c86ef",
+            "value": "#468cf6",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -12497,7 +12535,7 @@
         },
         "foreground": {
           "current": {
-            "value": "#6c86ef",
+            "value": "#64a0fa",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -12510,7 +12548,7 @@
             }
           },
           "hover": {
-            "value": "#6c86ef",
+            "value": "#64a0fa",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -12523,7 +12561,7 @@
             }
           },
           "active": {
-            "value": "#6c86ef",
+            "value": "#64a0fa",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -12551,7 +12589,7 @@
         },
         "background": {
           "current": {
-            "value": "#3b5bdb",
+            "value": "#64a0fa",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -12564,7 +12602,7 @@
             }
           },
           "current-foreground": {
-            "value": "#ffffff",
+            "value": "#1a1a1a",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -14445,108 +14483,146 @@
         }
       },
       "code-block": {
-        "dark": {
-          "background": {
-            "value": "#ffffff",
+        "background": {
+          "value": "{color.dark-mode.neutral.300}",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-code-block-background"
+              }
+            }
+          }
+        },
+        "foreground": {
+          "value": "#ffffff",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-code-block-foreground"
+              }
+            }
+          }
+        },
+        "line-prefix": {
+          "value": "#9699a1",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-code-block-line-prefix"
+              }
+            }
+          }
+        },
+        "syntax": {
+          "punctuation": {
+            "value": "#c3c5c9",
             "type": "color",
             "$extensions": {
               "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-dark-background"
+                  "WEB": "--pds-color-code-block-syntax-punctuation"
                 }
               }
             }
           },
-          "foreground": {
-            "value": "#ffffff",
+          "function": {
+            "value": "#f5c43a",
             "type": "color",
             "$extensions": {
               "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-dark-foreground"
+                  "WEB": "--pds-color-code-block-syntax-function"
                 }
               }
             }
           },
-          "line-prefix": {
-            "value": "#9699A1",
+          "keyword": {
+            "value": "#72c4ff",
             "type": "color",
             "$extensions": {
               "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-dark-line-prefix"
+                  "WEB": "--pds-color-code-block-syntax-keyword"
                 }
               }
             }
           },
-          "highlight": {
-            "value": "#474954",
+          "string": {
+            "value": "#a0f76e",
             "type": "color",
             "$extensions": {
               "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-dark-highlight"
+                  "WEB": "--pds-color-code-block-syntax-string"
                 }
               }
             }
-          }
-        },
-        "light": {
-          "background": {
-            "value": "#EFF0F0",
+          },
+          "boolean": {
+            "value": "#d18fff",
             "type": "color",
             "$extensions": {
+              "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-light-background"
+                  "WEB": "--pds-color-code-block-syntax-boolean"
                 }
               }
             }
           },
-          "foreground": {
-            "value": "#3B3D45",
+          "tag": {
+            "value": "#ff61ca",
             "type": "color",
             "$extensions": {
               "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-light-foreground"
+                  "WEB": "--pds-color-code-block-syntax-tag"
                 }
               }
             }
           },
-          "line-prefix": {
-            "value": "#686D78",
+          "deleted": {
+            "value": "#f8495d",
             "type": "color",
             "$extensions": {
               "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-light-line-prefix"
+                  "WEB": "--pds-color-code-block-syntax-deleted"
                 }
               }
             }
           },
-          "highlight": {
-            "value": "#DEDFE0",
+          "inserted": {
+            "value": "#a0f76e",
             "type": "color",
             "$extensions": {
               "public": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-code-block-light-highlight"
+                  "WEB": "--pds-color-code-block-syntax-inserted"
                 }
               }
             }
@@ -15068,7 +15144,7 @@
       },
       "tabs": {
         "border": {
-          "value": "{color.dark-mode.border.default-secondary}",
+          "value": "{color.dark-mode.border.separator}",
           "type": "color",
           "$extensions": {
             "public": true,
@@ -17691,27 +17767,6 @@
     },
     "semantic": {
       "typography": {
-        "line-height (lh)": {
-          "code": {
-            "value": {
-              "default": "180%",
-              "mobile": "180%"
-            },
-            "type": "lineHeight",
-            "$extensions": {
-              "public": true,
-              "com.figma": {
-                "scopes": [
-                  "LINE_HEIGHT"
-                ],
-                "exportAs": "skip",
-                "codeSyntax": {
-                  "WEB": "--pds-typography-lh-code"
-                }
-              }
-            }
-          }
-        },
         "size": {
           "input-label": {
             "value": {

package/build/js/variables.typography.d.ts

@@ -21,7 +21,6 @@ export const TYPOGRAPHY_LH_L: string;
 export const TYPOGRAPHY_LH_M: string;
 export const TYPOGRAPHY_LH_S: string;
 export const TYPOGRAPHY_LH_XS: string;
-export const TYPOGRAPHY_LH_CODE: string;
 /** 10px - Metadata, tiny labels */
 export const TYPOGRAPHY_SIZE_2XS: string;
 /** 12px - Small UI text, captions */

package/build/js/variables.typography.js

@@ -21,7 +21,6 @@ export const TYPOGRAPHY_LH_L = "165%";
 export const TYPOGRAPHY_LH_M = "150%";
 export const TYPOGRAPHY_LH_S = "130%";
 export const TYPOGRAPHY_LH_XS = "120%";
-export const TYPOGRAPHY_LH_CODE = "180%";
 export const TYPOGRAPHY_SIZE_2XS = "0.625rem"; // 10px - Metadata, tiny labels
 export const TYPOGRAPHY_SIZE_XS = "0.75rem"; // 12px - Small UI text, captions
 export const TYPOGRAPHY_SIZE_S = "0.875rem"; // 14px - Product default body text, forms, navigation, labels

package/build/json/tokens.json

@@ -2171,27 +2171,6 @@
           "XS"
         ],
         "public": true
-      },
-      "code": {
-        "value": "180%",
-        "filePath": "tokens/typography/semantic/line-height.json",
-        "isSource": true,
-        "original": {
-          "value": "180%",
-          "public": true
-        },
-        "name": "TypographyLhCode",
-        "attributes": {
-          "category": "typography",
-          "type": "lh",
-          "item": "code"
-        },
-        "path": [
-          "typography",
-          "lh",
-          "code"
-        ],
-        "public": true
       }
     },
     "size": {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@pantheon-systems/pds-design-tokens",
 	"description": "Design Tokens for the Pantheon Design System",
-	"version": "2.0.0-alpha.50",
+	"version": "2.0.0-alpha.52",
 	"publishConfig": {
 		"access": "public",
 		"registry": "https://registry.npmjs.org/",