@pantheon-systems/pds-design-tokens 2.0.0-alpha.57 → 2.0.0-alpha.58

package/build/css/variables.dark.css

@@ -99,9 +99,9 @@
   --pds-color-expansion-panel-open: oklch(0.2931 0 0);
   --pds-color-popover-border: oklch(0.31 0.005 258);
   --pds-color-skeleton-regular-base: oklch(0.3329 0 0);
-  --pds-color-skeleton-regular-movement: oklch(0.6830 0 0);
+  --pds-color-skeleton-regular-shimmer: oklch(0.4091 0 0);
   --pds-color-skeleton-bold-base: oklch(0.4091 0 0);
-  --pds-color-skeleton-bold-movement: oklch(0.6830 0 0);
+  --pds-color-skeleton-bold-shimmer: oklch(0.5103 0 0);
   --pds-color-sortable-border-hover: oklch(0.38 0.135 268);
   --pds-color-sortable-border-target: oklch(0.6575 0.177 272.74);
   --pds-color-spinner-full-1: #7600D9;
@@ -362,13 +362,15 @@
   --pds-color-overlay-subtle: rgba(0, 0, 0, 0.4);
   --pds-color-partner-bitbucket: #004DC0;
   --pds-color-partner-drupal: #009CDE;
+  --pds-color-partner-foreground: #FFFFFF;
   --pds-color-partner-gatsby: #663399;
   --pds-color-partner-github: #2DA44E;
   --pds-color-partner-gitlab: #fc6d26;
   --pds-color-partner-google: #4285F4;
   --pds-color-partner-nextjs: #ffffff;
+  --pds-color-partner-sumo: #FFFFFF;
   --pds-color-partner-wordpress: #0073AA;
-  --pds-color-segmented-control-track-background: oklch(0.2603 0 0);
+  --pds-color-segmented-control-track-background: oklch(0.2931 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);
@@ -398,7 +400,7 @@
   --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.6598 0.0403 232.31);
+  --pds-color-status-frozen-fill: oklch(0.7268 0.0778 307.70);
   --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);

package/build/css/variables.light.css

@@ -99,9 +99,9 @@
   --pds-color-expansion-panel-open: oklch(0.9702 0 0);
   --pds-color-popover-border: oklch(0.9430 0 0);
   --pds-color-skeleton-regular-base: oklch(0.8761 0 0);
-  --pds-color-skeleton-regular-movement: oklch(0.9702 0 0);
+  --pds-color-skeleton-regular-shimmer: oklch(0.9430 0 0);
   --pds-color-skeleton-bold-base: oklch(0.8047 0 0);
-  --pds-color-skeleton-bold-movement: oklch(0.9702 0 0);
+  --pds-color-skeleton-bold-shimmer: oklch(0.8761 0 0);
   --pds-color-sortable-border-hover: oklch(0.7913 0.1048 267.25);
   --pds-color-sortable-border-target: oklch(0.5558 0.2372 267.79);
   --pds-color-spinner-full-1: #8f00f9;
@@ -226,7 +226,7 @@
   --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.5550 0.0020 247.86);
+  --pds-color-close-button-foreground: oklch(0.4778 0.0020 247.87);
   --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);
@@ -316,7 +316,7 @@
   --pds-color-dropdown-top-border: #dfdfdf;
   --pds-color-dropdown-separator: oklch(0.9430 0 0);
   --pds-color-foreground-default: oklch(0.2178 0 0);
-  --pds-color-foreground-default-secondary: oklch(0.5550 0.0020 247.86);
+  --pds-color-foreground-default-secondary: oklch(0.4778 0.0020 247.87);
   --pds-color-foreground-reverse: oklch(1.0000 0 0);
   --pds-color-foreground-reverse-secondary: oklch(0.8452 0 0);
   --pds-color-highlight-background: oklch(0.9 0.13 72);
@@ -327,7 +327,7 @@
   --pds-color-input-selected-background: oklch(0.5256 0.1988 268.04);
   --pds-color-input-selected-foreground: oklch(1.0000 0 0);
   --pds-color-input-switch-icon: oklch(1.0000 0 0);
-  --pds-color-input-switch-background: oklch(0.5550 0.0020 247.86);
+  --pds-color-input-switch-background: oklch(0.4778 0.0020 247.87);
   --pds-color-input-tag-background-default: oklch(0.907 0 0);
   --pds-color-input-tag-background-hover: oklch(0.87 0 0);
   --pds-color-input-tag-background-active: oklch(0.9559 0.0143 308.29);
@@ -362,11 +362,13 @@
   --pds-color-overlay-subtle: rgba(0, 0, 0, 0.25);
   --pds-color-partner-bitbucket: #004DC0;
   --pds-color-partner-drupal: #009CDE;
+  --pds-color-partner-foreground: #FFFFFF;
   --pds-color-partner-gatsby: #663399;
   --pds-color-partner-github: #2DA44E;
   --pds-color-partner-gitlab: #fc6d26;
   --pds-color-partner-google: #4285F4;
   --pds-color-partner-nextjs: #000000;
+  --pds-color-partner-sumo: #000099;
   --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);
@@ -397,8 +399,8 @@
   --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.7411 0.0377 231.33);
+  --pds-color-status-neutral-indicator: oklch(0.4778 0.0020 247.87);
+  --pds-color-status-frozen-fill: oklch(0.6777 0.0966 309.02);
   --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

@@ -1868,7 +1868,7 @@
           }
         },
         "700": {
-          "value": "#727374",
+          "value": "#5c5d5e",
           "type": "color",
           "$extensions": {
             "com.figma": {
@@ -5108,6 +5108,19 @@
             }
           }
         },
+        "foreground": {
+          "value": "#FFFFFF",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-partner-foreground"
+              }
+            }
+          }
+        },
         "gatsby": {
           "value": "#663399",
           "type": "color",
@@ -5173,6 +5186,19 @@
             }
           }
         },
+        "sumo": {
+          "value": "#000099",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-partner-sumo"
+              }
+            }
+          }
+        },
         "wordpress": {
           "value": "#0073AA",
           "type": "color",
@@ -5629,7 +5655,7 @@
         },
         "frozen": {
           "fill": {
-            "value": "{color.light-mode.secondary.500}",
+            "value": "{color.light-mode.discovery.400}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -7156,8 +7182,8 @@
               }
             }
           },
-          "movement": {
-            "value": "{color.light-mode.neutral.200}",
+          "shimmer": {
+            "value": "{color.light-mode.neutral.300}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -7165,7 +7191,7 @@
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-skeleton-regular-movement"
+                  "WEB": "--pds-color-skeleton-regular-shimmer"
                 }
               }
             }
@@ -7186,8 +7212,8 @@
               }
             }
           },
-          "movement": {
-            "value": "{color.light-mode.neutral.200}",
+          "shimmer": {
+            "value": "{color.light-mode.neutral.400}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -7195,7 +7221,7 @@
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-skeleton-bold-movement"
+                  "WEB": "--pds-color-skeleton-bold-shimmer"
                 }
               }
             }
@@ -12996,6 +13022,19 @@
             }
           }
         },
+        "foreground": {
+          "value": "#FFFFFF",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-partner-foreground"
+              }
+            }
+          }
+        },
         "gatsby": {
           "value": "#663399",
           "type": "color",
@@ -13061,6 +13100,19 @@
             }
           }
         },
+        "sumo": {
+          "value": "#FFFFFF",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-partner-sumo"
+              }
+            }
+          }
+        },
         "wordpress": {
           "value": "#0073AA",
           "type": "color",
@@ -13078,7 +13130,7 @@
       "segmented-control": {
         "track": {
           "background": {
-            "value": "{color.dark-mode.neutral.200}",
+            "value": "{color.dark-mode.neutral.300}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -13517,7 +13569,7 @@
         },
         "frozen": {
           "fill": {
-            "value": "{color.dark-mode.secondary.400}",
+            "value": "{color.dark-mode.discovery.600}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -15044,8 +15096,8 @@
               }
             }
           },
-          "movement": {
-            "value": "{color.dark-mode.neutral.700}",
+          "shimmer": {
+            "value": "{color.dark-mode.neutral.500}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -15053,7 +15105,7 @@
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-skeleton-regular-movement"
+                  "WEB": "--pds-color-skeleton-regular-shimmer"
                 }
               }
             }
@@ -15074,8 +15126,8 @@
               }
             }
           },
-          "movement": {
-            "value": "{color.dark-mode.neutral.700}",
+          "shimmer": {
+            "value": "{color.dark-mode.neutral.600}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -15083,7 +15135,7 @@
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-skeleton-bold-movement"
+                  "WEB": "--pds-color-skeleton-bold-shimmer"
                 }
               }
             }

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