@channel.io/bezier-tokens 0.3.3-beta.5 → 0.3.3-beta.7

package/dist/beta/scss/dark-theme.scss

@@ -6,9 +6,9 @@ $border-bottom: 0 -1px 0 0 #ffffff1f !default;
 $border-right: -1px 0 0 0 #ffffff1f !default;
 $border-left: 1px 0 0 0 #ffffff1f !default;
 $border-top: 0 1px 0 0 #ffffff1f !default;
-$border-white-high: 0 0 0 1px #2a2a2dff !default;
-$border-white-higher: 0 0 0 1px #303035ff !default;
-$border-white-highest: 0 0 0 1px #37373cff !default;
+$border-white-high: 0 0 0 1px #242426ff !default;
+$border-white-higher: 0 0 0 1px #29292dff !default;
+$border-white-highest: 0 0 0 1px #313135ff !default;
 $elevation-1: 0 1px 2px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
 $elevation-2: 0 2px 6px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
 $elevation-3: 0 4px 12px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
@@ -110,12 +110,14 @@ $color-text-accent-green: #4bc16cff !default;
 $color-text-accent-red: #f26060ff !default;
 $color-text-accent-orange: #f79847ff !default;
 $color-text-accent-yellow: #f0be27ff !default;
+$color-text-accent-olive: #b7c427ff !default;
 $color-text-accent-teal: #40d3c5ff !default;
 $color-text-accent-navy: #6f7bc8ff !default;
 $color-text-accent-purple: #a970ffff !default;
 $color-text-accent-pink: #ec6fd3ff !default;
 $color-text-absolute-white: #ffff !default;
 $color-text-absolute-black: #000f !default;
+$color-text-inverse: #000000d9 !default;
 $color-icon-action: #6b6effff !default;
 $color-icon-success: #4bc16cff !default;
 $color-icon-highlight: #5cadefff !default;
@@ -137,6 +139,7 @@ $color-icon-accent-purple: #a970ffff !default;
 $color-icon-accent-pink: #ec6fd3ff !default;
 $color-icon-absolute-white: #ffff !default;
 $color-icon-absolute-black: #000f !default;
+$color-icon-inverse-heavier: #000000d9 !default;
 $color-fill-neutral-heaviest: #ffffffe6 !default;
 $color-fill-neutral-heavier: #fff6 !default;
 $color-fill-neutral-heavy: #fff3 !default;
@@ -164,9 +167,9 @@ $color-fill-critical: #f26060ff !default;
 $color-fill-critical-light: #f260604d !default;
 $color-fill-critical-lighter: #f260602e !default;
 $color-fill-critical-transparent: #f2606000 !default;
-$color-fill-grey: #2a2a2dff !default;
-$color-fill-grey-heavy: #303035ff !default;
-$color-fill-grey-heavier: #37373cff !default;
+$color-fill-grey: #242426ff !default;
+$color-fill-grey-heavy: #29292dff !default;
+$color-fill-grey-heavier: #313135ff !default;
 $color-fill-accent-blue: #6b6eff2e !default;
 $color-fill-accent-blue-heavy: #6b6eff4d !default;
 $color-fill-accent-blue-heavier: #6b6effff !default;
@@ -220,21 +223,21 @@ $color-fill-absolute-black-transparent: #0000 !default;
 $color-border-neutral: #ffffff1f !default;
 $color-border-neutral-heavy: #fff3 !default;
 $color-border-neutral-heavier: #fff6 !default;
-$color-border-detach: #242428ff !default;
-$color-border-detach-highest: #454549ff !default;
-$color-border-detach-higher: #303035ff !default;
-$color-border-detach-high: #2a2a2dff !default;
+$color-border-detach: #1d1d20ff !default;
+$color-border-detach-highest: #313135ff !default;
+$color-border-detach-higher: #29292dff !default;
+$color-border-detach-high: #242426ff !default;
 $color-border-detach-low: #1a1a1cff !default;
 $color-border-absolute-white: #ffff !default;
-$color-surface: #242428ff !default;
-$color-surface-highest: #37373cff !default;
-$color-surface-higher: #303035ff !default;
-$color-surface-high: #2a2a2dff !default;
+$color-surface: #1d1d20ff !default;
+$color-surface-highest: #313135ff !default;
+$color-surface-higher: #29292dff !default;
+$color-surface-high: #242426ff !default;
 $color-surface-low: #1a1a1cff !default;
-$color-surface-glass: #303035e6 !default;
-$color-surface-glass-highest: #454549e6 !default;
-$color-surface-glass-higher: #303035e6 !default;
-$color-surface-glass-high: #2a2a2de6 !default;
+$color-surface-glass: #29292de6 !default;
+$color-surface-glass-highest: #313135e6 !default;
+$color-surface-glass-higher: #29292de6 !default;
+$color-surface-glass-high: #242426e6 !default;
 $color-surface-accent-blue: #6b6effff !default;
 $color-surface-accent-cobalt: #5cadefff !default;
 $color-surface-accent-green: #4bc16cff !default;
@@ -445,6 +448,7 @@ $tokens: (
         'red': $color-text-accent-red,
         'orange': $color-text-accent-orange,
         'yellow': $color-text-accent-yellow,
+        'olive': $color-text-accent-olive,
         'teal': $color-text-accent-teal,
         'navy': $color-text-accent-navy,
         'purple': $color-text-accent-purple,
@@ -453,7 +457,8 @@ $tokens: (
       'absolute': (
         'white': $color-text-absolute-white,
         'black': $color-text-absolute-black
-      )
+      ),
+      'inverse': $color-text-inverse
     ),
     'icon': (
       'action': $color-icon-action,
@@ -482,6 +487,9 @@ $tokens: (
       'absolute': (
         'white': $color-icon-absolute-white,
         'black': $color-icon-absolute-black
+      ),
+      'inverse': (
+        'heavier': $color-icon-inverse-heavier
       )
     ),
     'fill': (

package/dist/beta/scss/global.scss

@@ -182,25 +182,26 @@ $color-grey-300: #e2e2e4ff !default;
 $color-grey-400: #cfcfd1ff !default;
 $color-grey-500: #a7a7aaff !default;
 $color-grey-600: #79797eff !default;
-$color-grey-700: #454549ff !default;
-$color-grey-750: #37373cff !default;
-$color-grey-800: #303035ff !default;
-$color-grey-850: #2a2a2dff !default;
-$color-grey-900: #242428ff !default;
+$color-grey-700: #3b3b3fff !default;
+$color-grey-750: #313135ff !default;
+$color-grey-800: #29292dff !default;
+$color-grey-850: #242426ff !default;
+$color-grey-900: #1d1d20ff !default;
 $color-grey-950: #1a1a1cff !default;
 $color-grey-50-80: #fbfbfbcc !default;
 $color-grey-100-80: #f7f7f8cc !default;
 $color-grey-100-90: #f7f7f8e6 !default;
 $color-grey-200-80: #efeff0cc !default;
 $color-grey-200-90: #efeff0e6 !default;
-$color-grey-700-80: #454549cc !default;
-$color-grey-700-90: #454549e6 !default;
-$color-grey-800-80: #303035cc !default;
-$color-grey-800-90: #303035e6 !default;
-$color-grey-850-80: #2a2a2dcc !default;
-$color-grey-850-90: #2a2a2de6 !default;
+$color-grey-700-80: #3b3b3fcc !default;
+$color-grey-700-90: #3b3b3fe6 !default;
+$color-grey-750-90: #313135e6 !default;
+$color-grey-800-80: #29292dcc !default;
+$color-grey-800-90: #29292de6 !default;
+$color-grey-850-80: #242426cc !default;
+$color-grey-850-90: #242426e6 !default;
 $color-grey-900-0: #24242800 !default;
-$color-grey-900-90: #242428e6 !default;
+$color-grey-900-90: #1d1d2000 !default;
 $color-white-0: #fff0 !default;
 $color-white-3: #ffffff08 !default;
 $color-white-5: #ffffff0d !default;
@@ -532,6 +533,7 @@ $tokens: (
       '200-90': $color-grey-200-90,
       '700-80': $color-grey-700-80,
       '700-90': $color-grey-700-90,
+      '750-90': $color-grey-750-90,
       '800-80': $color-grey-800-80,
       '800-90': $color-grey-800-90,
       '850-80': $color-grey-850-80,

package/dist/beta/scss/light-theme.scss

@@ -110,12 +110,14 @@ $color-text-accent-green: #20ab55ff !default;
 $color-text-accent-red: #e1535dff !default;
 $color-text-accent-orange: #e67f2bff !default;
 $color-text-accent-yellow: #edae0dff !default;
+$color-text-accent-olive: #b7c427ff !default;
 $color-text-accent-teal: #09b2acff !default;
 $color-text-accent-navy: #424fabff !default;
 $color-text-accent-purple: #8e57e7ff !default;
 $color-text-accent-pink: #d64bb5ff !default;
 $color-text-absolute-white: #ffff !default;
 $color-text-absolute-black: #000f !default;
+$color-text-inverse: #fffc !default;
 $color-icon-action: #6157eaff !default;
 $color-icon-success: #20ab55ff !default;
 $color-icon-highlight: #3292e3ff !default;
@@ -137,6 +139,7 @@ $color-icon-accent-purple: #8e57e7ff !default;
 $color-icon-accent-pink: #d64bb5ff !default;
 $color-icon-absolute-white: #ffff !default;
 $color-icon-absolute-black: #000f !default;
+$color-icon-inverse-heavier: #fffc !default;
 $color-fill-neutral-heaviest: #000000d9 !default;
 $color-fill-neutral-heavier: #0006 !default;
 $color-fill-neutral-heavy: #00000026 !default;
@@ -445,6 +448,7 @@ $tokens: (
         'red': $color-text-accent-red,
         'orange': $color-text-accent-orange,
         'yellow': $color-text-accent-yellow,
+        'olive': $color-text-accent-olive,
         'teal': $color-text-accent-teal,
         'navy': $color-text-accent-navy,
         'purple': $color-text-accent-purple,
@@ -453,7 +457,8 @@ $tokens: (
       'absolute': (
         'white': $color-text-absolute-white,
         'black': $color-text-absolute-black
-      )
+      ),
+      'inverse': $color-text-inverse
     ),
     'icon': (
       'action': $color-icon-action,
@@ -482,6 +487,9 @@ $tokens: (
       'absolute': (
         'white': $color-icon-absolute-white,
         'black': $color-icon-absolute-black
+      ),
+      'inverse': (
+        'heavier': $color-icon-inverse-heavier
       )
     ),
     'fill': (

package/dist/types/beta/cjs/darkTheme.d.ts

@@ -31,15 +31,15 @@ declare const _exports: Readonly<{
             ref: "0 dimension-1 0 0 color-border-neutral";
         }>;
         "border-white-high": Readonly<{
-            value: "0 0 0 1px #2a2a2dff";
+            value: "0 0 0 1px #242426ff";
             ref: "0 0 0 dimension-1 color-surface-high";
         }>;
         "border-white-higher": Readonly<{
-            value: "0 0 0 1px #303035ff";
+            value: "0 0 0 1px #29292dff";
             ref: "0 0 0 dimension-1 color-surface-higher";
         }>;
         "border-white-highest": Readonly<{
-            value: "0 0 0 1px #37373cff";
+            value: "0 0 0 1px #313135ff";
             ref: "0 0 0 dimension-1 color-surface-highest";
         }>;
     }>;
@@ -507,6 +507,13 @@ declare const _exports: Readonly<{
         "color-text-accent-yellow-hovered": Readonly<{
             value: "#f7c736ff";
         }>;
+        "color-text-accent-olive": Readonly<{
+            value: "#b7c427ff";
+            ref: "color-olive-300";
+        }>;
+        "color-text-accent-olive-hovered": Readonly<{
+            value: "#ccdb25ff";
+        }>;
         "color-text-accent-teal": Readonly<{
             value: "#40d3c5ff";
             ref: "color-teal-300";
@@ -549,6 +556,13 @@ declare const _exports: Readonly<{
         "color-text-absolute-black-hovered": Readonly<{
             value: "#0a0a0aff";
         }>;
+        "color-text-inverse": Readonly<{
+            value: "#000000d9";
+            ref: "color-black-85";
+        }>;
+        "color-text-inverse-hovered": Readonly<{
+            value: "#0a0a0ad9";
+        }>;
         "color-icon-action": Readonly<{
             value: "#6b6effff";
             ref: "color-blue-300";
@@ -696,6 +710,13 @@ declare const _exports: Readonly<{
         "color-icon-absolute-black-hovered": Readonly<{
             value: "#0a0a0aff";
         }>;
+        "color-icon-inverse-heavier": Readonly<{
+            value: "#000000d9";
+            ref: "color-black-85";
+        }>;
+        "color-icon-inverse-heavier-hovered": Readonly<{
+            value: "#0a0a0ad9";
+        }>;
         "color-fill-neutral-heaviest": Readonly<{
             value: "#ffffffe6";
             ref: "color-white-90";
@@ -886,25 +907,25 @@ declare const _exports: Readonly<{
             value: "#f260601a";
         }>;
         "color-fill-grey": Readonly<{
-            value: "#2a2a2dff";
+            value: "#242426ff";
             ref: "color-grey-850";
         }>;
         "color-fill-grey-hovered": Readonly<{
-            value: "#343438ff";
+            value: "#2e2e31ff";
         }>;
         "color-fill-grey-heavy": Readonly<{
-            value: "#303035ff";
+            value: "#29292dff";
             ref: "color-grey-800";
         }>;
         "color-fill-grey-heavy-hovered": Readonly<{
-            value: "#3a3a40ff";
+            value: "#333338ff";
         }>;
         "color-fill-grey-heavier": Readonly<{
-            value: "#37373cff";
+            value: "#313135ff";
             ref: "color-grey-750";
         }>;
         "color-fill-grey-heavier-hovered": Readonly<{
-            value: "#414147ff";
+            value: "#3b3b40ff";
         }>;
         "color-fill-accent-blue": Readonly<{
             value: "#6b6eff2e";
@@ -1278,32 +1299,32 @@ declare const _exports: Readonly<{
             value: "#ededed66";
         }>;
         "color-border-detach": Readonly<{
-            value: "#242428ff";
+            value: "#1d1d20ff";
             ref: "color-grey-900";
         }>;
         "color-border-detach-hovered": Readonly<{
-            value: "#2e2e33ff";
+            value: "#27272bff";
         }>;
         "color-border-detach-highest": Readonly<{
-            value: "#454549ff";
-            ref: "color-grey-700";
+            value: "#313135ff";
+            ref: "color-grey-750";
         }>;
         "color-border-detach-highest-hovered": Readonly<{
-            value: "#4f4f54ff";
+            value: "#3b3b40ff";
         }>;
         "color-border-detach-higher": Readonly<{
-            value: "#303035ff";
+            value: "#29292dff";
             ref: "color-grey-800";
         }>;
         "color-border-detach-higher-hovered": Readonly<{
-            value: "#3a3a40ff";
+            value: "#333338ff";
         }>;
         "color-border-detach-high": Readonly<{
-            value: "#2a2a2dff";
+            value: "#242426ff";
             ref: "color-grey-850";
         }>;
         "color-border-detach-high-hovered": Readonly<{
-            value: "#343438ff";
+            value: "#2e2e31ff";
         }>;
         "color-border-detach-low": Readonly<{
             value: "#1a1a1cff";
@@ -1320,32 +1341,32 @@ declare const _exports: Readonly<{
             value: "#edededff";
         }>;
         "color-surface": Readonly<{
-            value: "#242428ff";
+            value: "#1d1d20ff";
             ref: "color-grey-900";
         }>;
         "color-surface-hovered": Readonly<{
-            value: "#2e2e33ff";
+            value: "#27272bff";
         }>;
         "color-surface-highest": Readonly<{
-            value: "#37373cff";
+            value: "#313135ff";
             ref: "color-grey-750";
         }>;
         "color-surface-highest-hovered": Readonly<{
-            value: "#414147ff";
+            value: "#3b3b40ff";
         }>;
         "color-surface-higher": Readonly<{
-            value: "#303035ff";
+            value: "#29292dff";
             ref: "color-grey-800";
         }>;
         "color-surface-higher-hovered": Readonly<{
-            value: "#3a3a40ff";
+            value: "#333338ff";
         }>;
         "color-surface-high": Readonly<{
-            value: "#2a2a2dff";
+            value: "#242426ff";
             ref: "color-grey-850";
         }>;
         "color-surface-high-hovered": Readonly<{
-            value: "#343438ff";
+            value: "#2e2e31ff";
         }>;
         "color-surface-low": Readonly<{
             value: "#1a1a1cff";
@@ -1355,32 +1376,32 @@ declare const _exports: Readonly<{
             value: "#242427ff";
         }>;
         "color-surface-glass": Readonly<{
-            value: "#303035e6";
+            value: "#29292de6";
             ref: "color-grey-800-90";
         }>;
         "color-surface-glass-hovered": Readonly<{
-            value: "#3a3a40e6";
+            value: "#333338e6";
         }>;
         "color-surface-glass-highest": Readonly<{
-            value: "#454549e6";
-            ref: "color-grey-700-90";
+            value: "#313135e6";
+            ref: "color-grey-750-90";
         }>;
         "color-surface-glass-highest-hovered": Readonly<{
-            value: "#4f4f54e6";
+            value: "#3b3b40e6";
         }>;
         "color-surface-glass-higher": Readonly<{
-            value: "#303035e6";
+            value: "#29292de6";
             ref: "color-grey-800-90";
         }>;
         "color-surface-glass-higher-hovered": Readonly<{
-            value: "#3a3a40e6";
+            value: "#333338e6";
         }>;
         "color-surface-glass-high": Readonly<{
-            value: "#2a2a2de6";
+            value: "#242426e6";
             ref: "color-grey-850-90";
         }>;
         "color-surface-glass-high-hovered": Readonly<{
-            value: "#343438e6";
+            value: "#2e2e31e6";
         }>;
         "color-surface-accent-blue": Readonly<{
             value: "#6b6effff";

package/dist/types/beta/cjs/global.d.ts

@@ -550,19 +550,19 @@ declare const _exports: Readonly<{
             value: "#79797eff";
         }>;
         "color-grey-700": Readonly<{
-            value: "#454549ff";
+            value: "#3b3b3fff";
         }>;
         "color-grey-750": Readonly<{
-            value: "#37373cff";
+            value: "#313135ff";
         }>;
         "color-grey-800": Readonly<{
-            value: "#303035ff";
+            value: "#29292dff";
         }>;
         "color-grey-850": Readonly<{
-            value: "#2a2a2dff";
+            value: "#242426ff";
         }>;
         "color-grey-900": Readonly<{
-            value: "#242428ff";
+            value: "#1d1d20ff";
         }>;
         "color-grey-950": Readonly<{
             value: "#1a1a1cff";
@@ -583,28 +583,31 @@ declare const _exports: Readonly<{
             value: "#efeff0e6";
         }>;
         "color-grey-700-80": Readonly<{
-            value: "#454549cc";
+            value: "#3b3b3fcc";
         }>;
         "color-grey-700-90": Readonly<{
-            value: "#454549e6";
+            value: "#3b3b3fe6";
+        }>;
+        "color-grey-750-90": Readonly<{
+            value: "#313135e6";
         }>;
         "color-grey-800-80": Readonly<{
-            value: "#303035cc";
+            value: "#29292dcc";
         }>;
         "color-grey-800-90": Readonly<{
-            value: "#303035e6";
+            value: "#29292de6";
         }>;
         "color-grey-850-80": Readonly<{
-            value: "#2a2a2dcc";
+            value: "#242426cc";
         }>;
         "color-grey-850-90": Readonly<{
-            value: "#2a2a2de6";
+            value: "#242426e6";
         }>;
         "color-grey-900-0": Readonly<{
             value: "#24242800";
         }>;
         "color-grey-900-90": Readonly<{
-            value: "#242428e6";
+            value: "#1d1d2000";
         }>;
         "color-white-0": Readonly<{
             value: "#fff0";