@channel.io/bezier-tokens 0.3.3-beta.6 → 0.3.3-beta.8

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;
@@ -40,10 +40,10 @@ $radius-16: 16px !default;
 $radius-20: 20px !default;
 $radius-32: 32px !default;
 $state-error: 0 0 0 1px #f79847ff !default;
-$state-active: 0 0 0 1px #6b6effff !default;
+$state-active: 0 0 0 1px #8082ffff !default;
 $state-input-default: 0 1px 2px 0 #0000000d, inset 0 0 0 1px #fff3 !default;
-$state-input-hovered: 0 2px 6px 0 #0000000d, inset 0 0 0 1px #6b6effff !default;
-$state-input-active: 0 2px 6px 0 #0000000d, 0 0 0 3px #6b6eff73, inset 0 0 0 1px #6b6effff !default;
+$state-input-hovered: 0 2px 6px 0 #0000000d, inset 0 0 0 1px #8082ffff !default;
+$state-input-active: 0 2px 6px 0 #0000000d, 0 0 0 3px #6b6eff73, inset 0 0 0 1px #8082ffff !default;
 $state-input-error: 0 2px 6px 0 #0000000d, 0 0 0 3px #f798474d, inset 0 0 0 1px #f79847ff !default;
 $typography-heading-font-family: 'Inter', 'NotoSansKR', 'Noto Sans KR', 'NotoSansJP', 'Noto Sans JP', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'system-ui', 'sans-serif' !default;
 $typography-heading-size-xlarge: 24px !default;
@@ -95,61 +95,63 @@ $typography-code-weight-regular: 400 !default;
 $typography-code-letter-spacing: 0 !default;
 $typography-code-line-height-medium: 18px !default;
 $typography-code-line-height-small: 18px !default;
-$color-text-action: #6b6effff !default;
-$color-text-success: #4bc16cff !default;
+$color-text-action: #8082ffff !default;
+$color-text-success: #51c371ff !default;
 $color-text-highlight: #5cadefff !default;
 $color-text-warning: #f79847ff !default;
-$color-text-critical: #f26060ff !default;
+$color-text-critical: #f36868ff !default;
 $color-text-neutral-heaviest: #ffff !default;
 $color-text-neutral: #fffc !default;
 $color-text-neutral-light: #fff9 !default;
 $color-text-neutral-lighter: #fff6 !default;
-$color-text-accent-blue: #6b6effff !default;
+$color-text-accent-blue: #8082ffff !default;
 $color-text-accent-cobalt: #5cadefff !default;
-$color-text-accent-green: #4bc16cff !default;
-$color-text-accent-red: #f26060ff !default;
+$color-text-accent-green: #51c371ff !default;
+$color-text-accent-red: #f36868ff !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-navy: #7e89cdff !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-icon-action: #6b6effff !default;
-$color-icon-success: #4bc16cff !default;
+$color-text-inverse: #000000d9 !default;
+$color-icon-action: #8082ffff !default;
+$color-icon-success: #51c371ff !default;
 $color-icon-highlight: #5cadefff !default;
 $color-icon-warning: #f79847ff !default;
-$color-icon-critical: #f26060ff !default;
+$color-icon-critical: #f36868ff !default;
 $color-icon-neutral: #fff6 !default;
 $color-icon-neutral-heavy: #fff9 !default;
 $color-icon-neutral-heavier: #fffc !default;
-$color-icon-accent-blue: #6b6effff !default;
+$color-icon-accent-blue: #8082ffff !default;
 $color-icon-accent-cobalt: #5cadefff !default;
-$color-icon-accent-green: #4bc16cff !default;
-$color-icon-accent-red: #f26060ff !default;
+$color-icon-accent-green: #51c371ff !default;
+$color-icon-accent-red: #f36868ff !default;
 $color-icon-accent-orange: #f79847ff !default;
 $color-icon-accent-yellow: #f0be27ff !default;
 $color-icon-accent-olive: #b7c427ff !default;
 $color-icon-accent-teal: #40d3c5ff !default;
-$color-icon-accent-navy: #6f7bc8ff !default;
+$color-icon-accent-navy: #7e89cdff !default;
 $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-fill-neutral-heaviest: #ffffffe6 !default;
+$color-icon-inverse-heavier: #000000d9 !default;
+$color-fill-neutral-heaviest: #ffff !default;
 $color-fill-neutral-heavier: #fff6 !default;
 $color-fill-neutral-heavy: #fff3 !default;
 $color-fill-neutral-light: #ffffff14 !default;
 $color-fill-neutral-lighter: #ffffff0d !default;
 $color-fill-neutral-lightest: #ffffff08 !default;
 $color-fill-neutral-transparent: #fff0 !default;
-$color-fill-action: #6b6effff !default;
+$color-fill-action: #8082ffff !default;
 $color-fill-action-light: #6b6eff4d !default;
 $color-fill-action-lighter: #6b6eff2e !default;
 $color-fill-action-transparent: #6b6eff00 !default;
-$color-fill-success: #4bc16cff !default;
+$color-fill-success: #51c371ff !default;
 $color-fill-success-light: #4bc16c4d !default;
 $color-fill-success-lighter: #4bc16c2e !default;
 $color-fill-success-transparent: #4bc16c00 !default;
@@ -161,16 +163,16 @@ $color-fill-warning: #f79847ff !default;
 $color-fill-warning-light: #f798474d !default;
 $color-fill-warning-lighter: #f798472e !default;
 $color-fill-warning-transparent: #f7984700 !default;
-$color-fill-critical: #f26060ff !default;
+$color-fill-critical: #f36868ff !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;
+$color-fill-accent-blue-heavier: #8082ffff !default;
 $color-fill-accent-blue-transparent: #6b6eff00 !default;
 $color-fill-accent-cobalt: #5cadef2e !default;
 $color-fill-accent-cobalt-heavy: #5cadef4d !default;
@@ -178,11 +180,11 @@ $color-fill-accent-cobalt-heavier: #5cadefff !default;
 $color-fill-accent-cobalt-transparent: #5cadef00 !default;
 $color-fill-accent-green: #4bc16c2e !default;
 $color-fill-accent-green-heavy: #4bc16c4d !default;
-$color-fill-accent-green-heavier: #4bc16cff !default;
+$color-fill-accent-green-heavier: #51c371ff !default;
 $color-fill-accent-green-transparent: #4bc16c00 !default;
 $color-fill-accent-red: #f260602e !default;
 $color-fill-accent-red-heavy: #f260604d !default;
-$color-fill-accent-red-heavier: #f26060ff !default;
+$color-fill-accent-red-heavier: #f36868ff !default;
 $color-fill-accent-red-transparent: #f2606000 !default;
 $color-fill-accent-orange: #f798472e !default;
 $color-fill-accent-orange-heavy: #f798474d !default;
@@ -202,7 +204,7 @@ $color-fill-accent-teal-heavier: #40d3c5ff !default;
 $color-fill-accent-teal-transparent: #40d3c500 !default;
 $color-fill-accent-navy: #6f7bc82e !default;
 $color-fill-accent-navy-heavy: #6f7bc84d !default;
-$color-fill-accent-navy-heavier: #6f7bc8ff !default;
+$color-fill-accent-navy-heavier: #7e89cdff !default;
 $color-fill-accent-navy-transparent: #6f7bc800 !default;
 $color-fill-accent-purple: #a970ff2e !default;
 $color-fill-accent-purple-heavy: #a970ff4d !default;
@@ -218,43 +220,33 @@ $color-fill-absolute-white-transparent: #fff0 !default;
 $color-fill-absolute-black: #000f !default;
 $color-fill-absolute-black-light: #0003 !default;
 $color-fill-absolute-black-transparent: #0000 !default;
+$color-fill-bright: #5a5a5fff !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-accent-blue: #6b6effff !default;
-$color-surface-accent-cobalt: #5cadefff !default;
-$color-surface-accent-green: #4bc16cff !default;
-$color-surface-accent-red: #f26060ff !default;
-$color-surface-accent-orange: #f79847ff !default;
-$color-surface-accent-yellow: #f0be27ff !default;
-$color-surface-accent-olive: #b7c427ff !default;
-$color-surface-accent-teal: #40d3c5ff !default;
-$color-surface-accent-navy: #6f7bc8ff !default;
-$color-surface-accent-purple: #a970ffff !default;
-$color-surface-accent-pink: #ec6fd3ff !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-dim-absolute-black: #0006 !default;
 $color-dim-absolute-black-heavy: #0009 !default;
 $color-dim-absolute-white: #fff6 !default;
 $color-dim-absolute-white-heavy: #fff9 !default;
 $color-gradient-green: #20ab55ff !default;
-$color-gradient-green-heavy: #4bc16cff !default;
+$color-gradient-green-heavy: #51c371ff !default;
 $color-state-default: #fff3 !default;
-$color-state-action: #6b6effff !default;
+$color-state-action: #8082ffff !default;
 $color-state-action-light: #6b6eff73 !default;
 $color-state-warning: #f79847ff !default;
 $color-state-warning-light: #f798474d !default;
@@ -455,7 +447,8 @@ $tokens: (
       'absolute': (
         'white': $color-text-absolute-white,
         'black': $color-text-absolute-black
-      )
+      ),
+      'inverse': $color-text-inverse
     ),
     'icon': (
       'action': $color-icon-action,
@@ -484,6 +477,9 @@ $tokens: (
       'absolute': (
         'white': $color-icon-absolute-white,
         'black': $color-icon-absolute-black
+      ),
+      'inverse': (
+        'heavier': $color-icon-inverse-heavier
       )
     ),
     'fill': (
@@ -610,7 +606,8 @@ $tokens: (
           'light': $color-fill-absolute-black-light,
           'transparent': $color-fill-absolute-black-transparent
         )
-      )
+      ),
+      'bright': $color-fill-bright
     ),
     'border': (
       'neutral': (
@@ -640,19 +637,6 @@ $tokens: (
         'highest': $color-surface-glass-highest,
         'higher': $color-surface-glass-higher,
         'high': $color-surface-glass-high
-      ),
-      'accent': (
-        'blue': $color-surface-accent-blue,
-        'cobalt': $color-surface-accent-cobalt,
-        'green': $color-surface-accent-green,
-        'red': $color-surface-accent-red,
-        'orange': $color-surface-accent-orange,
-        'yellow': $color-surface-accent-yellow,
-        'olive': $color-surface-accent-olive,
-        'teal': $color-surface-accent-teal,
-        'navy': $color-surface-accent-navy,
-        'purple': $color-surface-accent-purple,
-        'pink': $color-surface-accent-pink
       )
     ),
     'dim': (

package/dist/beta/scss/global.scss

@@ -1,7 +1,7 @@
 
 $color-blue-100: #b2b7ffff !default;
 $color-blue-200: #8d93ffff !default;
-$color-blue-300: #6b6effff !default;
+$color-blue-300: #8082ffff !default;
 $color-blue-400: #6157eaff !default;
 $color-blue-500: #5139d9ff !default;
 $color-blue-600: #4134bbff !default;
@@ -33,7 +33,7 @@ $color-cobalt-400-20: #3292e333 !default;
 $color-cobalt-400-30: #3292e34d !default;
 $color-green-100: #a4ecb3ff !default;
 $color-green-200: #7cd985ff !default;
-$color-green-300: #4bc16cff !default;
+$color-green-300: #51c371ff !default;
 $color-green-400: #20ab55ff !default;
 $color-green-500: #358761ff !default;
 $color-green-600: #327055ff !default;
@@ -49,7 +49,7 @@ $color-green-400-20: #20ab5533 !default;
 $color-green-400-30: #20ab554d !default;
 $color-red-100: #ffb8b8ff !default;
 $color-red-200: #ff8683ff !default;
-$color-red-300: #f26060ff !default;
+$color-red-300: #f36868ff !default;
 $color-red-400: #e1535dff !default;
 $color-red-500: #bc3a42ff !default;
 $color-red-600: #992c34ff !default;
@@ -129,7 +129,7 @@ $color-teal-400-20: #09b2ac33 !default;
 $color-teal-400-30: #09b2ac4d !default;
 $color-navy-100: #a5b2eeff !default;
 $color-navy-200: #8b99d9ff !default;
-$color-navy-300: #6f7bc8ff !default;
+$color-navy-300: #7e89cdff !default;
 $color-navy-400: #424fabff !default;
 $color-navy-500: #353888ff !default;
 $color-navy-600: #22245bff !default;
@@ -175,6 +175,7 @@ $color-pink-400-5: #d64bb50d !default;
 $color-pink-400-10: #d64bb51a !default;
 $color-pink-400-20: #d64bb533 !default;
 $color-pink-400-30: #d64bb54d !default;
+$color-grey-25: #fdfdffff !default;
 $color-grey-50: #fbfbfbff !default;
 $color-grey-100: #f7f7f8ff !default;
 $color-grey-200: #efeff0ff !default;
@@ -182,25 +183,27 @@ $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-650: #5a5a5fff !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;
@@ -512,6 +515,7 @@ $tokens: (
       '400-30': $color-pink-400-30
     ),
     'grey': (
+      '25': $color-grey-25,
       '50': $color-grey-50,
       '100': $color-grey-100,
       '200': $color-grey-200,
@@ -519,6 +523,7 @@ $tokens: (
       '400': $color-grey-400,
       '500': $color-grey-500,
       '600': $color-grey-600,
+      '650': $color-grey-650,
       '700': $color-grey-700,
       '750': $color-grey-750,
       '800': $color-grey-800,
@@ -532,6 +537,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

@@ -117,6 +117,7 @@ $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: #ffff !default;
 $color-icon-action: #6157eaff !default;
 $color-icon-success: #20ab55ff !default;
 $color-icon-highlight: #3292e3ff !default;
@@ -138,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: #ffff !default;
 $color-fill-neutral-heaviest: #000000d9 !default;
 $color-fill-neutral-heavier: #0006 !default;
 $color-fill-neutral-heavy: #00000026 !default;
@@ -218,6 +220,7 @@ $color-fill-absolute-white-transparent: #fff0 !default;
 $color-fill-absolute-black: #000f !default;
 $color-fill-absolute-black-light: #0003 !default;
 $color-fill-absolute-black-transparent: #0000 !default;
+$color-fill-bright: #fdfdffff !default;
 $color-border-neutral: #00000014 !default;
 $color-border-neutral-heavy: #00000026 !default;
 $color-border-neutral-heavier: #0006 !default;
@@ -236,23 +239,12 @@ $color-surface-glass: #ffffffe6 !default;
 $color-surface-glass-highest: #efeff0e6 !default;
 $color-surface-glass-higher: #f7f7f8e6 !default;
 $color-surface-glass-high: #ffffffe6 !default;
-$color-surface-accent-blue: #6157eaff !default;
-$color-surface-accent-cobalt: #3292e3ff !default;
-$color-surface-accent-green: #20ab55ff !default;
-$color-surface-accent-red: #e1535dff !default;
-$color-surface-accent-orange: #e67f2bff !default;
-$color-surface-accent-yellow: #edae0dff !default;
-$color-surface-accent-olive: #a9b110ff !default;
-$color-surface-accent-teal: #09b2acff !default;
-$color-surface-accent-navy: #424fabff !default;
-$color-surface-accent-purple: #8e57e7ff !default;
-$color-surface-accent-pink: #d64bb5ff !default;
 $color-dim-absolute-black: #0006 !default;
 $color-dim-absolute-black-heavy: #0009 !default;
 $color-dim-absolute-white: #fff6 !default;
 $color-dim-absolute-white-heavy: #fff9 !default;
 $color-gradient-green: #20ab55ff !default;
-$color-gradient-green-heavy: #4bc16cff !default;
+$color-gradient-green-heavy: #51c371ff !default;
 $color-state-default: #00000026 !default;
 $color-state-action: #6157eaff !default;
 $color-state-action-light: #6157ea4d !default;
@@ -455,7 +447,8 @@ $tokens: (
       'absolute': (
         'white': $color-text-absolute-white,
         'black': $color-text-absolute-black
-      )
+      ),
+      'inverse': $color-text-inverse
     ),
     'icon': (
       'action': $color-icon-action,
@@ -484,6 +477,9 @@ $tokens: (
       'absolute': (
         'white': $color-icon-absolute-white,
         'black': $color-icon-absolute-black
+      ),
+      'inverse': (
+        'heavier': $color-icon-inverse-heavier
       )
     ),
     'fill': (
@@ -610,7 +606,8 @@ $tokens: (
           'light': $color-fill-absolute-black-light,
           'transparent': $color-fill-absolute-black-transparent
         )
-      )
+      ),
+      'bright': $color-fill-bright
     ),
     'border': (
       'neutral': (
@@ -640,19 +637,6 @@ $tokens: (
         'highest': $color-surface-glass-highest,
         'higher': $color-surface-glass-higher,
         'high': $color-surface-glass-high
-      ),
-      'accent': (
-        'blue': $color-surface-accent-blue,
-        'cobalt': $color-surface-accent-cobalt,
-        'green': $color-surface-accent-green,
-        'red': $color-surface-accent-red,
-        'orange': $color-surface-accent-orange,
-        'yellow': $color-surface-accent-yellow,
-        'olive': $color-surface-accent-olive,
-        'teal': $color-surface-accent-teal,
-        'navy': $color-surface-accent-navy,
-        'purple': $color-surface-accent-purple,
-        'pink': $color-surface-accent-pink
       )
     ),
     'dim': (