@pantheon-systems/pds-design-tokens 2.0.0-alpha.53 → 2.0.0-alpha.55

package/build/css/variables.dark.css

@@ -86,15 +86,13 @@
   --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.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-active: oklch(0.2800 0.0500 268.00);
   --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);
@@ -178,6 +176,7 @@
   --pds-color-tally-info-foreground: oklch(1.0000 0 0);
   --pds-color-tally-discovery-background: oklch(0.5200 0.1177 303.12);
   --pds-color-tally-discovery-foreground: oklch(1.0000 0 0);
+  --pds-color-brand-default: oklch(0.8622 0.1681 88.31);
   --pds-color-surface-default: oklch(0.2178 0 0);
   --pds-color-surface-default-secondary: oklch(0.2603 0 0);
   --pds-color-surface-reverse: oklch(0.9702 0 0);
@@ -345,7 +344,8 @@
   --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);
+  --pds-color-interactive-background-selected: oklch(0.2800 0.0500 268.00);
+  --pds-color-interactive-background-selected-foreground: oklch(0.9702 0 0);
   --pds-color-interactive-reverse-focus: oklch(0.5256 0.1988 268.04);
   --pds-color-interactive-reverse-link-default: oklch(0.5256 0.1988 268.04);
   --pds-color-interactive-reverse-link-hover: oklch(0.6015 0.1484 35.70);
@@ -364,35 +364,37 @@
   --pds-color-partner-google: #4285F4;
   --pds-color-partner-nextjs: #ffffff;
   --pds-color-partner-wordpress: #0073AA;
+  --pds-color-segmented-control-track-background: oklch(0.2603 0 0);
+  --pds-color-segmented-control-selected-background: oklch(0.4091 0 0);
   --pds-color-social-rss: #f3763a;
   --pds-color-status-success-foreground: oklch(0.8774 0.0659 125.63);
   --pds-color-status-success-fill: oklch(0.6402 0.1224 130.73);
-  --pds-color-status-success-border: oklch(0.5670 0.1201 132.73);
+  --pds-color-status-success-border: oklch(0.6402 0.1224 130.73);
   --pds-color-status-success-background: oklch(0.3746 0.0812 134.16);
   --pds-color-status-success-background-hover: oklch(0.4733 0.1035 134.24);
   --pds-color-status-warning-foreground: oklch(0.8603 0.0782 67.73);
   --pds-color-status-warning-fill: oklch(0.7116 0.1405 61.04);
-  --pds-color-status-warning-border: oklch(0.5428 0.1292 52.61);
+  --pds-color-status-warning-border: oklch(0.7116 0.1405 61.04);
   --pds-color-status-warning-background: oklch(0.3111 0.0678 55.70);
   --pds-color-status-warning-background-hover: oklch(0.4323 0.1012 53.56);
   --pds-color-status-critical-foreground: oklch(0.8022 0.0731 18.80);
   --pds-color-status-critical-fill: oklch(0.5954 0.1582 23.19);
-  --pds-color-status-critical-border: oklch(0.4501 0.1581 26.35);
+  --pds-color-status-critical-border: oklch(0.5954 0.1582 23.19);
   --pds-color-status-critical-background: oklch(0.2550 0.0814 25.05);
   --pds-color-status-critical-background-hover: oklch(0.3541 0.1230 26.18);
   --pds-color-status-info-foreground: oklch(0.8372 0.0459 236.03);
   --pds-color-status-info-fill: oklch(0.6392 0.0968 238.41);
-  --pds-color-status-info-border: oklch(0.4662 0.0924 245.48);
+  --pds-color-status-info-border: oklch(0.6392 0.0968 238.41);
   --pds-color-status-info-background: oklch(0.2906 0.0644 249.78);
   --pds-color-status-info-background-hover: oklch(0.3751 0.0783 246.74);
   --pds-color-status-discovery-foreground: oklch(0.8272 0.0507 309.02);
   --pds-color-status-discovery-fill: oklch(0.6127 0.1092 305.74);
-  --pds-color-status-discovery-border: oklch(0.4277 0.1065 303.89);
+  --pds-color-status-discovery-border: oklch(0.6127 0.1092 305.74);
   --pds-color-status-discovery-background: oklch(0.2671 0.0855 295.38);
   --pds-color-status-discovery-background-hover: oklch(0.3388 0.0952 301.67);
   --pds-color-status-neutral-background: oklch(0.3329 0 0);
   --pds-color-status-neutral-indicator: oklch(0.8452 0 0);
-  --pds-color-status-frozen-fill: oklch(0.6392 0.0968 238.41);
+  --pds-color-status-frozen-fill: oklch(0.6598 0.0403 232.31);
   --pds-color-status-disabled-fill: oklch(0.5103 0 0);
   --pds-elevation-button-primary-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
   --pds-elevation-button-secondary-active: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.16);
@@ -407,9 +409,9 @@
   --pds-elevation-drawer-right: -2px 0px 32px 0px rgba(0, 0, 0, 0.8), -1px 0px 0px 0px rgba(255, 255, 255, 0.12);
   --pds-elevation-icon-button-pressed: inset 0px 0px 4px 1px rgba(255, 255, 255, 0.06);
   --pds-elevation-sortable-hover: 0px 0px 3px 1px rgba(58, 93, 251, 0.35);
-  --pds-elevation-raised: 0px 3px 5px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
+  --pds-elevation-raised: 0px 0px 0px 1px rgba(130, 130, 130, 0.1), 0px 5px 10px 0px rgba(18, 18, 25, 0.6);
   --pds-elevation-draggable: 0px 2px 6px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(255, 255, 255, 0.2);
-  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
+  --pds-elevation-overlay: 0px 0px 0px 1px oklch(0.31 0.005 258), 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
   --pds-gradient-avatar-midnight: linear-gradient(315deg, #5F41E5 0%, #141013 100%);
   --pds-gradient-avatar-twilight: linear-gradient(315deg, #C72FA2 0%, #1B0874 100%);
   --pds-gradient-avatar-sunrise: linear-gradient(135deg,  #3017A1 0%, #F09737 100%);

package/build/css/variables.light.css

@@ -86,8 +86,6 @@
   --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);
   --pds-color-datepicker-selected-background: oklch(0.5256 0.1988 268.04);
   --pds-color-datepicker-selected-foreground: oklch(1.0000 0 0);
   --pds-color-pagination-foreground-hover: oklch(0.2178 0 0);
@@ -178,6 +176,7 @@
   --pds-color-tally-info-foreground: oklch(1.0000 0 0);
   --pds-color-tally-discovery-background: oklch(0.4277 0.1065 303.89);
   --pds-color-tally-discovery-foreground: oklch(1.0000 0 0);
+  --pds-color-brand-default: oklch(0.8622 0.1681 88.31);
   --pds-color-surface-default: oklch(1.0000 0 0);
   --pds-color-surface-default-secondary: oklch(0.9702 0 0);
   --pds-color-surface-reverse: oklch(0.2178 0 0);
@@ -346,6 +345,7 @@
   --pds-color-interactive-background-hover: oklch(0.9702 0 0);
   --pds-color-interactive-background-active: oklch(0.9430 0 0);
   --pds-color-interactive-background-selected: oklch(0.9500 0.0300 268.00);
+  --pds-color-interactive-background-selected-foreground: oklch(0.2178 0 0);
   --pds-color-interactive-reverse-focus: oklch(0.6496 0.1590 270.95);
   --pds-color-interactive-reverse-link-default: oklch(0.6496 0.1590 270.95);
   --pds-color-interactive-reverse-link-hover: oklch(0.6707 0.1296 32.99);
@@ -364,35 +364,37 @@
   --pds-color-partner-google: #4285F4;
   --pds-color-partner-nextjs: #000000;
   --pds-color-partner-wordpress: #0073AA;
+  --pds-color-segmented-control-track-background: oklch(0.9430 0 0);
+  --pds-color-segmented-control-selected-background: oklch(1.0000 0 0);
   --pds-color-social-rss: #f26522;
   --pds-color-status-success-foreground: oklch(0.5670 0.1201 132.73);
   --pds-color-status-success-fill: oklch(0.5670 0.1201 132.73);
-  --pds-color-status-success-border: oklch(0.8774 0.0659 125.63);
+  --pds-color-status-success-border: oklch(0.5670 0.1201 132.73);
   --pds-color-status-success-background: oklch(0.9656 0.0192 122.83);
   --pds-color-status-success-background-hover: oklch(0.9301 0.0402 124.12);
   --pds-color-status-warning-foreground: oklch(0.5658 0.1338 53.43);
   --pds-color-status-warning-fill: oklch(0.6419 0.1457 55.55);
-  --pds-color-status-warning-border: oklch(0.8603 0.0782 67.73);
+  --pds-color-status-warning-border: oklch(0.6419 0.1457 55.55);
   --pds-color-status-warning-background: oklch(0.9665 0.0199 70.00);
   --pds-color-status-warning-background-hover: oklch(0.9208 0.0469 69.27);
   --pds-color-status-critical-foreground: oklch(0.4501 0.1581 26.35);
   --pds-color-status-critical-fill: oklch(0.5338 0.1771 25.54);
-  --pds-color-status-critical-border: oklch(0.7978 0.0754 20.67);
+  --pds-color-status-critical-border: oklch(0.5338 0.1771 25.54);
   --pds-color-status-critical-background: oklch(0.9740 0.0075 17.42);
   --pds-color-status-critical-background-hover: oklch(0.8859 0.0414 19.05);
   --pds-color-status-info-foreground: oklch(0.4662 0.0924 245.48);
   --pds-color-status-info-fill: oklch(0.5510 0.1014 242.56);
-  --pds-color-status-info-border: oklch(0.8372 0.0459 236.03);
+  --pds-color-status-info-border: oklch(0.5510 0.1014 242.56);
   --pds-color-status-info-background: oklch(0.9584 0.0134 233.74);
   --pds-color-status-info-background-hover: oklch(0.9123 0.0286 231.46);
   --pds-color-status-discovery-foreground: oklch(0.4277 0.1065 303.89);
   --pds-color-status-discovery-fill: oklch(0.5200 0.1177 303.12);
-  --pds-color-status-discovery-border: oklch(0.8272 0.0507 309.02);
+  --pds-color-status-discovery-border: oklch(0.5200 0.1177 303.12);
   --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.5550 0.0020 247.86);
-  --pds-color-status-frozen-fill: oklch(0.5510 0.1014 242.56);
+  --pds-color-status-frozen-fill: oklch(0.7411 0.0377 231.33);
   --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);
   --pds-elevation-button-secondary-active: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.10);

package/build/figma/tokens.json

@@ -2445,6 +2445,22 @@
       }
     },
     "semantic": {
+      "brand": {
+        "default": {
+          "value": "{color.light-mode.brand.500}",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "resolveValue": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-brand-default"
+              }
+            }
+          }
+        }
+      },
       "surface": {
         "default": {
           "value": "{color.light-mode.neutral.100}",
@@ -4859,6 +4875,20 @@
                 }
               }
             }
+          },
+          "selected-foreground": {
+            "value": "{color.light-mode.foreground.default}",
+            "type": "color",
+            "$extensions": {
+              "public": true,
+              "resolveValue": true,
+              "com.figma": {
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-color-interactive-background-selected-foreground"
+                }
+              }
+            }
           }
         },
         "reverse": {
@@ -5116,6 +5146,40 @@
           }
         }
       },
+      "segmented-control": {
+        "track": {
+          "background": {
+            "value": "{color.light-mode.neutral.300}",
+            "type": "color",
+            "$extensions": {
+              "public": true,
+              "resolveValue": true,
+              "com.figma": {
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-color-segmented-control-track-background"
+                }
+              }
+            }
+          }
+        },
+        "selected": {
+          "background": {
+            "value": "{color.light-mode.neutral.100}",
+            "type": "color",
+            "$extensions": {
+              "public": true,
+              "resolveValue": true,
+              "com.figma": {
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-color-segmented-control-selected-background"
+                }
+              }
+            }
+          }
+        }
+      },
       "social": {
         "rss": {
           "value": "#f26522",
@@ -5162,7 +5226,7 @@
             }
           },
           "border": {
-            "value": "{color.light-mode.success.300}",
+            "value": "{color.light-mode.success.700}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -5234,7 +5298,7 @@
             }
           },
           "border": {
-            "value": "{color.light-mode.warning.300}",
+            "value": "{color.light-mode.warning.600}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -5306,7 +5370,7 @@
             }
           },
           "border": {
-            "value": "{color.light-mode.critical.300}",
+            "value": "{color.light-mode.critical.600}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -5378,7 +5442,7 @@
             }
           },
           "border": {
-            "value": "{color.light-mode.info.300}",
+            "value": "{color.light-mode.info.600}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -5450,7 +5514,7 @@
             }
           },
           "border": {
-            "value": "{color.light-mode.discovery.300}",
+            "value": "{color.light-mode.discovery.600}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -5524,7 +5588,7 @@
         },
         "frozen": {
           "fill": {
-            "value": "{color.light-mode.info.600}",
+            "value": "{color.light-mode.secondary.500}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -6852,36 +6916,6 @@
             }
           }
         },
-        "range": {
-          "background": {
-            "value": "{color.light-mode.interactive.background.selected}",
-            "type": "color",
-            "$extensions": {
-              "public": true,
-              "resolveValue": true,
-              "com.figma": {
-                "exportAs": "variable",
-                "codeSyntax": {
-                  "WEB": "--pds-color-datepicker-range-background"
-                }
-              }
-            }
-          },
-          "foreground": {
-            "value": "{color.light-mode.foreground.default}",
-            "type": "color",
-            "$extensions": {
-              "public": true,
-              "resolveValue": true,
-              "com.figma": {
-                "exportAs": "variable",
-                "codeSyntax": {
-                  "WEB": "--pds-color-datepicker-range-foreground"
-                }
-              }
-            }
-          }
-        },
         "selected": {
           "background": {
             "value": "{color.light-mode.interactive.background.current}",
@@ -10150,18 +10184,18 @@
           "value": [
             {
               "x": "0",
-              "y": "3",
-              "blur": "5",
-              "spread": "0",
-              "color": "rgba(18, 18, 25, 0.6)",
+              "y": "0",
+              "blur": "0",
+              "spread": "1",
+              "color": "rgba(130, 130, 130, 0.1)",
               "type": "dropShadow"
             },
             {
               "x": "0",
-              "y": "0",
-              "blur": "0",
-              "spread": "1",
-              "color": "rgba(120, 120, 120, 0.15)",
+              "y": "5",
+              "blur": "10",
+              "spread": "0",
+              "color": "rgba(18, 18, 25, 0.6)",
               "type": "dropShadow"
             }
           ],
@@ -10210,18 +10244,18 @@
           "value": [
             {
               "x": "0",
-              "y": "8",
-              "blur": "12",
-              "spread": "0",
-              "color": "rgba(18, 18, 25, 0.6)",
+              "y": "0",
+              "blur": "0",
+              "spread": "1",
+              "color": "oklch(0.31 0.005 258)",
               "type": "dropShadow"
             },
             {
               "x": "0",
-              "y": "0",
-              "blur": "0",
-              "spread": "1",
-              "color": "rgba(120, 120, 120, 0.15)",
+              "y": "8",
+              "blur": "12",
+              "spread": "0",
+              "color": "rgba(18, 18, 25, 0.6)",
               "type": "dropShadow"
             }
           ],
@@ -10239,6 +10273,22 @@
       }
     },
     "semantic": {
+      "brand": {
+        "default": {
+          "value": "{color.dark-mode.brand.500}",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "resolveValue": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-brand-default"
+              }
+            }
+          }
+        }
+      },
       "surface": {
         "default": {
           "value": "{color.dark-mode.neutral.100}",
@@ -12644,7 +12694,7 @@
             }
           },
           "selected": {
-            "value": "#0e1528",
+            "value": "#1e2842",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -12655,6 +12705,20 @@
                 }
               }
             }
+          },
+          "selected-foreground": {
+            "value": "{color.dark-mode.foreground.default}",
+            "type": "color",
+            "$extensions": {
+              "public": true,
+              "resolveValue": true,
+              "com.figma": {
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-color-interactive-background-selected-foreground"
+                }
+              }
+            }
           }
         },
         "reverse": {
@@ -12912,6 +12976,40 @@
           }
         }
       },
+      "segmented-control": {
+        "track": {
+          "background": {
+            "value": "{color.dark-mode.neutral.200}",
+            "type": "color",
+            "$extensions": {
+              "public": true,
+              "resolveValue": true,
+              "com.figma": {
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-color-segmented-control-track-background"
+                }
+              }
+            }
+          }
+        },
+        "selected": {
+          "background": {
+            "value": "{color.dark-mode.neutral.500}",
+            "type": "color",
+            "$extensions": {
+              "public": true,
+              "resolveValue": true,
+              "com.figma": {
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-color-segmented-control-selected-background"
+                }
+              }
+            }
+          }
+        }
+      },
       "social": {
         "rss": {
           "value": "#f3763a",
@@ -12958,7 +13056,7 @@
             }
           },
           "border": {
-            "value": "{color.dark-mode.success.300}",
+            "value": "{color.dark-mode.success.400}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -13030,7 +13128,7 @@
             }
           },
           "border": {
-            "value": "{color.dark-mode.warning.300}",
+            "value": "{color.dark-mode.warning.500}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -13102,7 +13200,7 @@
             }
           },
           "border": {
-            "value": "{color.dark-mode.critical.300}",
+            "value": "{color.dark-mode.critical.500}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -13174,7 +13272,7 @@
             }
           },
           "border": {
-            "value": "{color.dark-mode.info.300}",
+            "value": "{color.dark-mode.info.500}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -13246,7 +13344,7 @@
             }
           },
           "border": {
-            "value": "{color.dark-mode.discovery.300}",
+            "value": "{color.dark-mode.discovery.500}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -13320,7 +13418,7 @@
         },
         "frozen": {
           "fill": {
-            "value": "{color.dark-mode.info.500}",
+            "value": "{color.dark-mode.secondary.400}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -14648,36 +14746,6 @@
             }
           }
         },
-        "range": {
-          "background": {
-            "value": "{color.dark-mode.interactive.background.selected}",
-            "type": "color",
-            "$extensions": {
-              "public": true,
-              "resolveValue": true,
-              "com.figma": {
-                "exportAs": "variable",
-                "codeSyntax": {
-                  "WEB": "--pds-color-datepicker-range-background"
-                }
-              }
-            }
-          },
-          "foreground": {
-            "value": "{color.dark-mode.foreground.reverse}",
-            "type": "color",
-            "$extensions": {
-              "public": true,
-              "resolveValue": true,
-              "com.figma": {
-                "exportAs": "variable",
-                "codeSyntax": {
-                  "WEB": "--pds-color-datepicker-range-foreground"
-                }
-              }
-            }
-          }
-        },
         "selected": {
           "background": {
             "value": "{color.dark-mode.interactive.background.current}",

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.53",
+	"version": "2.0.0-alpha.55",
 	"publishConfig": {
 		"access": "public",
 		"registry": "https://registry.npmjs.org/",