@pantheon-systems/pds-design-tokens 2.0.0-alpha.56 → 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;
@@ -314,16 +314,20 @@
   --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
   --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
   --pds-color-dropdown-top-border: rgba(255, 255, 255, 0.00);
+  --pds-color-dropdown-separator: oklch(0.4091 0 0);
   --pds-color-foreground-default: oklch(0.9702 0 0);
   --pds-color-foreground-default-secondary: oklch(0.8452 0 0);
   --pds-color-foreground-reverse: oklch(0.2178 0 0);
   --pds-color-foreground-reverse-secondary: oklch(0.5173 0 0);
+  --pds-color-highlight-background: oklch(0.55 0.115 65);
+  --pds-color-highlight-foreground: oklch(0.9673 0 0);
   --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.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-selected-foreground: oklch(0.2178 0 0);
+  --pds-color-input-switch-icon: oklch(0.2178 0 0);
+  --pds-color-input-switch-background: oklch(0.6830 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.7049 0.1468 258.30);
@@ -358,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);
@@ -394,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);
@@ -314,16 +314,20 @@
   --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
   --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
   --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);
+  --pds-color-highlight-foreground: oklch(0.2178 0 0);
   --pds-color-input-placeholder: oklch(0.8047 0 0);
   --pds-color-input-file-upload-button-background-default: oklch(0.9702 0 0);
   --pds-color-input-file-upload-button-background-hover: oklch(0.9430 0 0);
   --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.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);
@@ -358,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);
@@ -393,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": {
@@ -4409,6 +4409,20 @@
               }
             }
           }
+        },
+        "separator": {
+          "value": "{color.light-mode.neutral.300}",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "resolveValue": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-dropdown-separator"
+              }
+            }
+          }
         }
       },
       "foreground": {
@@ -4469,6 +4483,36 @@
           }
         }
       },
+      "highlight": {
+        "background": {
+          "value": "#ffd078",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "resolveValue": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-highlight-background"
+              }
+            }
+          }
+        },
+        "foreground": {
+          "value": "#1a1a1a",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "resolveValue": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-highlight-foreground"
+              }
+            }
+          }
+        }
+      },
       "input": {
         "placeholder": {
           "value": "{color.light-mode.neutral.500}",
@@ -4562,6 +4606,20 @@
                 }
               }
             }
+          },
+          "background": {
+            "value": "{color.light-mode.neutral.700}",
+            "type": "color",
+            "$extensions": {
+              "public": true,
+              "resolveValue": true,
+              "com.figma": {
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-color-input-switch-background"
+                }
+              }
+            }
           }
         },
         "tag": {
@@ -5050,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",
@@ -5115,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",
@@ -5571,7 +5655,7 @@
         },
         "frozen": {
           "fill": {
-            "value": "{color.light-mode.secondary.500}",
+            "value": "{color.light-mode.discovery.400}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -7098,8 +7182,8 @@
               }
             }
           },
-          "movement": {
-            "value": "{color.light-mode.neutral.200}",
+          "shimmer": {
+            "value": "{color.light-mode.neutral.300}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -7107,7 +7191,7 @@
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-skeleton-regular-movement"
+                  "WEB": "--pds-color-skeleton-regular-shimmer"
                 }
               }
             }
@@ -7128,8 +7212,8 @@
               }
             }
           },
-          "movement": {
-            "value": "{color.light-mode.neutral.200}",
+          "shimmer": {
+            "value": "{color.light-mode.neutral.400}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -7137,7 +7221,7 @@
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-skeleton-bold-movement"
+                  "WEB": "--pds-color-skeleton-bold-shimmer"
                 }
               }
             }
@@ -12239,6 +12323,20 @@
               }
             }
           }
+        },
+        "separator": {
+          "value": "{color.dark-mode.neutral.500}",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "resolveValue": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-dropdown-separator"
+              }
+            }
+          }
         }
       },
       "foreground": {
@@ -12299,6 +12397,36 @@
           }
         }
       },
+      "highlight": {
+        "background": {
+          "value": "#9f6116",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "resolveValue": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-highlight-background"
+              }
+            }
+          }
+        },
+        "foreground": {
+          "value": "#f4f4f4",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "resolveValue": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-highlight-foreground"
+              }
+            }
+          }
+        }
+      },
       "input": {
         "placeholder": {
           "value": "{color.dark-mode.neutral.700}",
@@ -12364,7 +12492,7 @@
             }
           },
           "foreground": {
-            "value": "#ffffff",
+            "value": "{color.dark-mode.neutral.100}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -12380,7 +12508,7 @@
         },
         "switch": {
           "icon": {
-            "value": "{color.dark-mode.neutral.800}",
+            "value": "{color.dark-mode.neutral.100}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -12392,6 +12520,20 @@
                 }
               }
             }
+          },
+          "background": {
+            "value": "{color.dark-mode.neutral.700}",
+            "type": "color",
+            "$extensions": {
+              "public": true,
+              "resolveValue": true,
+              "com.figma": {
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-color-input-switch-background"
+                }
+              }
+            }
           }
         },
         "tag": {
@@ -12880,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",
@@ -12945,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",
@@ -12962,7 +13130,7 @@
       "segmented-control": {
         "track": {
           "background": {
-            "value": "{color.dark-mode.neutral.200}",
+            "value": "{color.dark-mode.neutral.300}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -13401,7 +13569,7 @@
         },
         "frozen": {
           "fill": {
-            "value": "{color.dark-mode.secondary.400}",
+            "value": "{color.dark-mode.discovery.600}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -14928,8 +15096,8 @@
               }
             }
           },
-          "movement": {
-            "value": "{color.dark-mode.neutral.700}",
+          "shimmer": {
+            "value": "{color.dark-mode.neutral.500}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -14937,7 +15105,7 @@
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
-                  "WEB": "--pds-color-skeleton-regular-movement"
+                  "WEB": "--pds-color-skeleton-regular-shimmer"
                 }
               }
             }
@@ -14958,8 +15126,8 @@
               }
             }
           },
-          "movement": {
-            "value": "{color.dark-mode.neutral.700}",
+          "shimmer": {
+            "value": "{color.dark-mode.neutral.600}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -14967,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.56",
+	"version": "2.0.0-alpha.58",
 	"publishConfig": {
 		"access": "public",
 		"registry": "https://registry.npmjs.org/",