@pantheon-systems/pds-design-tokens 2.0.0-alpha.40 → 2.0.0-alpha.41

package/build/css/variables.dark.css

@@ -143,6 +143,8 @@
   --pds-color-skeleton-regular-movement: oklch(0.5991 0.0051 258.33);
   --pds-color-skeleton-bold-base: oklch(0.4235 0.0071 264.49);
   --pds-color-skeleton-bold-movement: oklch(0.5991 0.0051 258.33);
+  --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;
   --pds-color-spinner-full-2: #A69000;
   --pds-color-spinner-full-3: transparent;
@@ -252,7 +254,7 @@
   --pds-color-bg-default: oklch(0.2046 0 0);
   --pds-color-bg-default-secondary: oklch(0.1489 0.0027 248.08);
   --pds-color-bg-reverse: oklch(0.8388 0.003 264.54);
-  --pds-color-border-default: oklch(0.3554 0.0058 258.35);
+  --pds-color-border-default: oklch(0.31 0.005 258);
   --pds-color-border-input: oklch(0.4235 0.0071 264.49);
   --pds-color-border-separator: oklch(0.5991 0 0);
   --pds-color-border-hover: oklch(0.5 0.005 264);
@@ -295,7 +297,7 @@
   --pds-color-close-button-background-hover: #ffffff1a;
   --pds-color-icon-button-standard-background-default: rgba(255, 255, 255, 0.00);
   --pds-color-icon-button-standard-background-hover: #ffffff1a;
-  --pds-color-icon-button-standard-border-default: #ffffff1a;
+  --pds-color-icon-button-standard-border-default: #ffffff2e;
   --pds-color-icon-button-standard-border-hover: #ffffff26;
   --pds-color-icon-button-standard-foreground: oklch(1.0000 0 0);
   --pds-color-icon-button-critical-background-default: oklch(0.5856 0.2126 29.44);
@@ -399,7 +401,7 @@
   --pds-color-interactive-background-active: oklch(0.3554 0.0058 258.35);
   --pds-color-interactive-focus: oklch(0.5558 0.2372 267.79);
   --pds-color-interactive-link-default: oklch(0.6575 0.177 272.74);
-  --pds-color-interactive-link-hover: oklch(0.7973 0.1023 274.67);
+  --pds-color-interactive-link-hover: oklch(0.744 0.129 274);
   --pds-color-interactive-link-active: oklch(0.6311 0.2503 304.99);
   --pds-color-interactive-link-visited: oklch(0.6311 0.2503 304.99);
   --pds-color-interactive-ui-hover: oklch(0.6575 0.177 272.74);
@@ -458,8 +460,10 @@
   --pds-color-status-disabled-dot: oklch(0.8853 0 0);
   --pds-elevation-drawer-left: 2px 0px 32px 0px rgba(0, 0, 0, 0.8), 1px 0px 0px 0px rgba(255, 255, 255, 0.12);
   --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-draggable: 0px 0px 0px 1px rgba(76, 78, 82, 0.35), 0px 3px 10px 0px rgba(10, 11, 12, 0.60);
+  --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-gradient-avatar-midnight: linear-gradient(315deg, #5F41E5 0%, #141013 100%);
   --pds-gradient-avatar-twilight: linear-gradient(315deg, #C72FA2 0%, #1B0874 100%);

package/build/css/variables.light.css

@@ -143,6 +143,8 @@
   --pds-color-skeleton-regular-movement: oklch(0.9851 0 0);
   --pds-color-skeleton-bold-base: oklch(0.8047 0 0);
   --pds-color-skeleton-bold-movement: oklch(0.9702 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;
   --pds-color-spinner-full-2: #ffdc28;
   --pds-color-spinner-full-3: transparent;
@@ -250,7 +252,7 @@
   --pds-color-toast-warning-icon: oklch(0.8008 0.1637 90.52);
   --pds-color-toast-critical-icon: oklch(0.6766 0.1572 26.68);
   --pds-color-bg-default: oklch(1.0000 0 0);
-  --pds-color-bg-default-secondary: oklch(0.9702 0 0);
+  --pds-color-bg-default-secondary: oklch(0.9851 0 0);
   --pds-color-bg-reverse: oklch(0.2046 0 0);
   --pds-color-border-default: oklch(0.9401 0 0);
   --pds-color-border-input: oklch(0.8853 0 0);
@@ -305,7 +307,7 @@
   --pds-color-icon-button-critical-foreground: oklch(0.5103 0.1942 29.6);
   --pds-color-icon-button-reverse-background-default: rgba(255, 255, 255, 0.00);
   --pds-color-icon-button-reverse-background-hover: #ffffff1a;
-  --pds-color-icon-button-reverse-border-default: #ffffff1a;
+  --pds-color-icon-button-reverse-border-default: #ffffff2e;
   --pds-color-icon-button-reverse-border-hover: #ffffff26;
   --pds-color-icon-button-reverse-foreground: oklch(1.0000 0 0);
   --pds-color-split-button-primary-separator: oklch(0.5103 0 0);
@@ -399,7 +401,7 @@
   --pds-color-interactive-background-active: oklch(0.9401 0 0);
   --pds-color-interactive-focus: oklch(0.5558 0.2372 267.79);
   --pds-color-interactive-link-default: oklch(0.5558 0.2372 267.79);
-  --pds-color-interactive-link-hover: oklch(0.4125 0.1942 266.8);
+  --pds-color-interactive-link-hover: oklch(0.47 0.212 267.6);
   --pds-color-interactive-link-active: oklch(0.4682 0.2508 299.4);
   --pds-color-interactive-link-visited: oklch(0.4682 0.2508 299.4);
   --pds-color-interactive-ui-hover: oklch(0.5558 0.2372 267.79);
@@ -458,8 +460,10 @@
   --pds-color-status-disabled-dot: oklch(0.8853 0 0);
   --pds-elevation-drawer-left: 4px 0px 16px 0px rgba(0, 0, 0, 0.08);
   --pds-elevation-drawer-right: -4px 0px 16px 0px rgba(0, 0, 0, 0.08);
+  --pds-elevation-icon-button-pressed: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.04);
+  --pds-elevation-sortable-hover: 0px 0px 3px 1px rgba(58, 93, 251, 0.25);
   --pds-elevation-raised: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 8px 8px -8px rgba(0, 0, 0, 0.04);
-  --pds-elevation-draggable: 0px 0px 0px 1px rgba(23, 23, 23, 0.08), 0px 2px 4px 0px rgba(23, 23, 23, 0.12);
+  --pds-elevation-draggable: 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
   --pds-elevation-overlay: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
   --pds-gradient-avatar-midnight: linear-gradient(315deg, #5F41E5 0%, #141013 100%);
   --pds-gradient-avatar-twilight: linear-gradient(315deg, #C72FA2 0%, #1B0874 100%);

package/build/figma/tokens.json

@@ -2236,18 +2236,18 @@
           "value": [
             {
               "x": "0",
-              "y": "0",
-              "blur": "0",
-              "spread": "1",
-              "color": "rgba(23, 23, 23, 0.08)",
+              "y": "2",
+              "blur": "2",
+              "spread": "0",
+              "color": "rgba(0, 0, 0, 0.04)",
               "type": "dropShadow"
             },
             {
               "x": "0",
-              "y": "2",
-              "blur": "4",
-              "spread": "0",
-              "color": "rgba(23, 23, 23, 0.12)",
+              "y": "0",
+              "blur": "0",
+              "spread": "1",
+              "color": "rgba(0, 0, 0, 0.08)",
               "type": "dropShadow"
             }
           ],
@@ -2327,7 +2327,7 @@
           }
         },
         "default-secondary": {
-          "value": "{color.light-mode.aether.200}",
+          "value": "{color.light-mode.aether.100}",
           "type": "color",
           "$extensions": {
             "public": true,
@@ -4485,11 +4485,10 @@
             }
           },
           "hover": {
-            "value": "{color.light-mode.iris.700}",
+            "value": "#2a46cf",
             "type": "color",
             "$extensions": {
               "public": true,
-              "resolveValue": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
@@ -7507,6 +7506,36 @@
           }
         }
       },
+      "sortable": {
+        "border": {
+          "hover": {
+            "value": "#9db9ff",
+            "type": "color",
+            "$extensions": {
+              "public": true,
+              "com.figma": {
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-color-sortable-border-hover"
+                }
+              }
+            }
+          },
+          "target": {
+            "value": "#3a5dfb",
+            "type": "color",
+            "$extensions": {
+              "public": true,
+              "com.figma": {
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-color-sortable-border-target"
+                }
+              }
+            }
+          }
+        }
+      },
       "spinner": {
         "full": {
           "1": {
@@ -9060,6 +9089,54 @@
               }
             }
           }
+        },
+        "icon-button": {
+          "pressed": {
+            "value": [
+              {
+                "x": "0",
+                "y": "0",
+                "blur": "4",
+                "spread": "1",
+                "color": "rgba(0, 0, 0, 0.04)",
+                "type": "innerShadow"
+              }
+            ],
+            "type": "boxShadow",
+            "$extensions": {
+              "public": true,
+              "com.figma": {
+                "exportAs": "style",
+                "codeSyntax": {
+                  "WEB": "--pds-elevation-icon-button-pressed"
+                }
+              }
+            }
+          }
+        },
+        "sortable": {
+          "hover": {
+            "value": [
+              {
+                "x": "0",
+                "y": "0",
+                "blur": "3",
+                "spread": "1",
+                "color": "rgba(58, 93, 251, 0.25)",
+                "type": "dropShadow"
+              }
+            ],
+            "type": "boxShadow",
+            "$extensions": {
+              "public": true,
+              "com.figma": {
+                "exportAs": "style",
+                "codeSyntax": {
+                  "WEB": "--pds-elevation-sortable-hover"
+                }
+              }
+            }
+          }
         }
       }
     },
@@ -9578,6 +9655,54 @@
             }
           }
         }
+      },
+      "icon-button": {
+        "pressed": {
+          "value": [
+            {
+              "x": "0",
+              "y": "0",
+              "blur": "4",
+              "spread": "1",
+              "color": "rgba(0, 0, 0, 0.04)",
+              "type": "innerShadow"
+            }
+          ],
+          "type": "boxShadow",
+          "$extensions": {
+            "public": true,
+            "com.figma": {
+              "exportAs": "style",
+              "codeSyntax": {
+                "WEB": "--pds-elevation-icon-button-pressed"
+              }
+            }
+          }
+        }
+      },
+      "sortable": {
+        "hover": {
+          "value": [
+            {
+              "x": "0",
+              "y": "0",
+              "blur": "3",
+              "spread": "1",
+              "color": "rgba(58, 93, 251, 0.25)",
+              "type": "dropShadow"
+            }
+          ],
+          "type": "boxShadow",
+          "$extensions": {
+            "public": true,
+            "com.figma": {
+              "exportAs": "style",
+              "codeSyntax": {
+                "WEB": "--pds-elevation-sortable-hover"
+              }
+            }
+          }
+        }
       }
     }
   },
@@ -10263,18 +10388,18 @@
           "value": [
             {
               "x": "0",
-              "y": "0",
-              "blur": "0",
-              "spread": "1",
-              "color": "rgba(76, 78, 82, 0.35)",
+              "y": "2",
+              "blur": "6",
+              "spread": "0",
+              "color": "rgba(0, 0, 0, 0.4)",
               "type": "dropShadow"
             },
             {
               "x": "0",
-              "y": "3",
-              "blur": "10",
-              "spread": "0",
-              "color": "rgba(10, 11, 12, 0.60)",
+              "y": "0",
+              "blur": "0",
+              "spread": "1",
+              "color": "rgba(255, 255, 255, 0.2)",
               "type": "dropShadow"
             }
           ],
@@ -10368,11 +10493,10 @@
       },
       "border": {
         "default": {
-          "value": "{color.dark-mode.aether.400}",
+          "value": "#2f3033",
           "type": "color",
           "$extensions": {
             "public": true,
-            "resolveValue": true,
             "com.figma": {
               "exportAs": "variable",
               "codeSyntax": {
@@ -11019,7 +11143,7 @@
           },
           "border": {
             "default": {
-              "value": "#ffffff1a",
+              "value": "#ffffff2e",
               "type": "color",
               "$extensions": {
                 "public": true,
@@ -12500,11 +12624,10 @@
             }
           },
           "hover": {
-            "value": "{color.dark-mode.iris.200}",
+            "value": "#93a5fd",
             "type": "color",
             "$extensions": {
               "public": true,
-              "resolveValue": true,
               "com.figma": {
                 "exportAs": "variable",
                 "codeSyntax": {
@@ -15522,6 +15645,36 @@
           }
         }
       },
+      "sortable": {
+        "border": {
+          "hover": {
+            "value": "#243989",
+            "type": "color",
+            "$extensions": {
+              "public": true,
+              "com.figma": {
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-color-sortable-border-hover"
+                }
+              }
+            }
+          },
+          "target": {
+            "value": "#6f85fc",
+            "type": "color",
+            "$extensions": {
+              "public": true,
+              "com.figma": {
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-color-sortable-border-target"
+                }
+              }
+            }
+          }
+        }
+      },
       "spinner": {
         "full": {
           "1": {
@@ -17091,6 +17244,54 @@
               }
             }
           }
+        },
+        "icon-button": {
+          "pressed": {
+            "value": [
+              {
+                "x": "0",
+                "y": "0",
+                "blur": "4",
+                "spread": "1",
+                "color": "rgba(255, 255, 255, 0.06)",
+                "type": "innerShadow"
+              }
+            ],
+            "type": "boxShadow",
+            "$extensions": {
+              "public": true,
+              "com.figma": {
+                "exportAs": "style",
+                "codeSyntax": {
+                  "WEB": "--pds-elevation-icon-button-pressed"
+                }
+              }
+            }
+          }
+        },
+        "sortable": {
+          "hover": {
+            "value": [
+              {
+                "x": "0",
+                "y": "0",
+                "blur": "3",
+                "spread": "1",
+                "color": "rgba(58, 93, 251, 0.35)",
+                "type": "dropShadow"
+              }
+            ],
+            "type": "boxShadow",
+            "$extensions": {
+              "public": true,
+              "com.figma": {
+                "exportAs": "style",
+                "codeSyntax": {
+                  "WEB": "--pds-elevation-sortable-hover"
+                }
+              }
+            }
+          }
         }
       }
     },
@@ -17625,6 +17826,54 @@
             }
           }
         }
+      },
+      "icon-button": {
+        "pressed": {
+          "value": [
+            {
+              "x": "0",
+              "y": "0",
+              "blur": "4",
+              "spread": "1",
+              "color": "rgba(255, 255, 255, 0.06)",
+              "type": "innerShadow"
+            }
+          ],
+          "type": "boxShadow",
+          "$extensions": {
+            "public": true,
+            "com.figma": {
+              "exportAs": "style",
+              "codeSyntax": {
+                "WEB": "--pds-elevation-icon-button-pressed"
+              }
+            }
+          }
+        }
+      },
+      "sortable": {
+        "hover": {
+          "value": [
+            {
+              "x": "0",
+              "y": "0",
+              "blur": "3",
+              "spread": "1",
+              "color": "rgba(58, 93, 251, 0.35)",
+              "type": "dropShadow"
+            }
+          ],
+          "type": "boxShadow",
+          "$extensions": {
+            "public": true,
+            "com.figma": {
+              "exportAs": "style",
+              "codeSyntax": {
+                "WEB": "--pds-elevation-sortable-hover"
+              }
+            }
+          }
+        }
       }
     }
   },

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