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

package/dist/beta/esm/global.mjs

@@ -2,7 +2,7 @@ export default Object.freeze({
   "color": Object.freeze({
     "color-blue-100": Object.freeze({"value":"#b2b7ffff"}),
     "color-blue-200": Object.freeze({"value":"#8d93ffff"}),
-    "color-blue-300": Object.freeze({"value":"#6b6effff"}),
+    "color-blue-300": Object.freeze({"value":"#8082ffff"}),
     "color-blue-400": Object.freeze({"value":"#6157eaff"}),
     "color-blue-500": Object.freeze({"value":"#5139d9ff"}),
     "color-blue-600": Object.freeze({"value":"#4134bbff"}),
@@ -34,7 +34,7 @@ export default Object.freeze({
     "color-cobalt-400-30": Object.freeze({"value":"#3292e34d"}),
     "color-green-100": Object.freeze({"value":"#a4ecb3ff"}),
     "color-green-200": Object.freeze({"value":"#7cd985ff"}),
-    "color-green-300": Object.freeze({"value":"#4bc16cff"}),
+    "color-green-300": Object.freeze({"value":"#51c371ff"}),
     "color-green-400": Object.freeze({"value":"#20ab55ff"}),
     "color-green-500": Object.freeze({"value":"#358761ff"}),
     "color-green-600": Object.freeze({"value":"#327055ff"}),
@@ -50,7 +50,7 @@ export default Object.freeze({
     "color-green-400-30": Object.freeze({"value":"#20ab554d"}),
     "color-red-100": Object.freeze({"value":"#ffb8b8ff"}),
     "color-red-200": Object.freeze({"value":"#ff8683ff"}),
-    "color-red-300": Object.freeze({"value":"#f26060ff"}),
+    "color-red-300": Object.freeze({"value":"#f36868ff"}),
     "color-red-400": Object.freeze({"value":"#e1535dff"}),
     "color-red-500": Object.freeze({"value":"#bc3a42ff"}),
     "color-red-600": Object.freeze({"value":"#992c34ff"}),
@@ -130,7 +130,7 @@ export default Object.freeze({
     "color-teal-400-30": Object.freeze({"value":"#09b2ac4d"}),
     "color-navy-100": Object.freeze({"value":"#a5b2eeff"}),
     "color-navy-200": Object.freeze({"value":"#8b99d9ff"}),
-    "color-navy-300": Object.freeze({"value":"#6f7bc8ff"}),
+    "color-navy-300": Object.freeze({"value":"#7e89cdff"}),
     "color-navy-400": Object.freeze({"value":"#424fabff"}),
     "color-navy-500": Object.freeze({"value":"#353888ff"}),
     "color-navy-600": Object.freeze({"value":"#22245bff"}),
@@ -176,6 +176,7 @@ export default Object.freeze({
     "color-pink-400-10": Object.freeze({"value":"#d64bb51a"}),
     "color-pink-400-20": Object.freeze({"value":"#d64bb533"}),
     "color-pink-400-30": Object.freeze({"value":"#d64bb54d"}),
+    "color-grey-25": Object.freeze({"value":"#fdfdffff"}),
     "color-grey-50": Object.freeze({"value":"#fbfbfbff"}),
     "color-grey-100": Object.freeze({"value":"#f7f7f8ff"}),
     "color-grey-200": Object.freeze({"value":"#efeff0ff"}),
@@ -183,6 +184,7 @@ export default Object.freeze({
     "color-grey-400": Object.freeze({"value":"#cfcfd1ff"}),
     "color-grey-500": Object.freeze({"value":"#a7a7aaff"}),
     "color-grey-600": Object.freeze({"value":"#79797eff"}),
+    "color-grey-650": Object.freeze({"value":"#5a5a5fff"}),
     "color-grey-700": Object.freeze({"value":"#3b3b3fff"}),
     "color-grey-750": Object.freeze({"value":"#313135ff"}),
     "color-grey-800": Object.freeze({"value":"#29292dff"}),

package/dist/beta/esm/lightTheme.mjs

@@ -158,8 +158,8 @@ export default Object.freeze({
     "color-text-absolute-white-hovered": Object.freeze({"value":"#edededff"}),
     "color-text-absolute-black": Object.freeze({"value":"#000f","ref":"color-black-100"}),
     "color-text-absolute-black-hovered": Object.freeze({"value":"#1c1c1cff"}),
-    "color-text-inverse": Object.freeze({"value":"#fffc","ref":"color-white-80"}),
-    "color-text-inverse-hovered": Object.freeze({"value":"#edededcc"}),
+    "color-text-inverse": Object.freeze({"value":"#ffff","ref":"color-white-100"}),
+    "color-text-inverse-hovered": Object.freeze({"value":"#edededff"}),
     "color-icon-action": Object.freeze({"value":"#6157eaff","ref":"color-blue-400"}),
     "color-icon-action-hovered": Object.freeze({"value":"#5146e4ff"}),
     "color-icon-success": Object.freeze({"value":"#20ab55ff","ref":"color-green-400"}),
@@ -202,8 +202,8 @@ export default Object.freeze({
     "color-icon-absolute-white-hovered": Object.freeze({"value":"#edededff"}),
     "color-icon-absolute-black": Object.freeze({"value":"#000f","ref":"color-black-100"}),
     "color-icon-absolute-black-hovered": Object.freeze({"value":"#1c1c1cff"}),
-    "color-icon-inverse-heavier": Object.freeze({"value":"#fffc","ref":"color-white-80"}),
-    "color-icon-inverse-heavier-hovered": Object.freeze({"value":"#edededcc"}),
+    "color-icon-inverse-heavier": Object.freeze({"value":"#ffff","ref":"color-white-100"}),
+    "color-icon-inverse-heavier-hovered": Object.freeze({"value":"#edededff"}),
     "color-fill-neutral-heaviest": Object.freeze({"value":"#000000d9","ref":"color-black-85"}),
     "color-fill-neutral-heaviest-hovered": Object.freeze({"value":"#1c1c1cd9"}),
     "color-fill-neutral-heavier": Object.freeze({"value":"#0006","ref":"color-black-40"}),
@@ -364,6 +364,8 @@ export default Object.freeze({
     "color-fill-absolute-black-light-hovered": Object.freeze({"value":"#1c1c1c4d"}),
     "color-fill-absolute-black-transparent": Object.freeze({"value":"#0000","ref":"color-black-0"}),
     "color-fill-absolute-black-transparent-hovered": Object.freeze({"value":"#0000000d"}),
+    "color-fill-bright": Object.freeze({"value":"#fdfdffff","ref":"color-grey-25"}),
+    "color-fill-bright-hovered": Object.freeze({"value":"#d9d9ffff"}),
     "color-border-neutral": Object.freeze({"value":"#00000014","ref":"color-black-8"}),
     "color-border-neutral-hovered": Object.freeze({"value":"#1c1c1c1e"}),
     "color-border-neutral-heavy": Object.freeze({"value":"#00000026","ref":"color-black-15"}),
@@ -400,28 +402,6 @@ export default Object.freeze({
     "color-surface-glass-higher-hovered": Object.freeze({"value":"#e5e5e8e6"}),
     "color-surface-glass-high": Object.freeze({"value":"#ffffffe6","ref":"color-white-90"}),
     "color-surface-glass-high-hovered": Object.freeze({"value":"#ededede6"}),
-    "color-surface-accent-blue": Object.freeze({"value":"#6157eaff","ref":"color-blue-400"}),
-    "color-surface-accent-blue-hovered": Object.freeze({"value":"#5146e4ff"}),
-    "color-surface-accent-cobalt": Object.freeze({"value":"#3292e3ff","ref":"color-cobalt-400"}),
-    "color-surface-accent-cobalt-hovered": Object.freeze({"value":"#2589ddff"}),
-    "color-surface-accent-green": Object.freeze({"value":"#20ab55ff","ref":"color-green-400"}),
-    "color-surface-accent-green-hovered": Object.freeze({"value":"#219c50ff"}),
-    "color-surface-accent-red": Object.freeze({"value":"#e1535dff","ref":"color-red-400"}),
-    "color-surface-accent-red-hovered": Object.freeze({"value":"#da444fff"}),
-    "color-surface-accent-orange": Object.freeze({"value":"#e67f2bff","ref":"color-orange-400"}),
-    "color-surface-accent-orange-hovered": Object.freeze({"value":"#df751fff"}),
-    "color-surface-accent-yellow": Object.freeze({"value":"#edae0dff","ref":"color-yellow-400"}),
-    "color-surface-accent-yellow-hovered": Object.freeze({"value":"#d9a010ff"}),
-    "color-surface-accent-olive": Object.freeze({"value":"#a9b110ff","ref":"color-olive-400"}),
-    "color-surface-accent-olive-hovered": Object.freeze({"value":"#9ba212ff"}),
-    "color-surface-accent-teal": Object.freeze({"value":"#09b2acff","ref":"color-teal-400"}),
-    "color-surface-accent-teal-hovered": Object.freeze({"value":"#08a5a0ff"}),
-    "color-surface-accent-navy": Object.freeze({"value":"#424fabff","ref":"color-navy-400"}),
-    "color-surface-accent-navy-hovered": Object.freeze({"value":"#414c9cff"}),
-    "color-surface-accent-purple": Object.freeze({"value":"#8e57e7ff","ref":"color-purple-400"}),
-    "color-surface-accent-purple-hovered": Object.freeze({"value":"#8247e1ff"}),
-    "color-surface-accent-pink": Object.freeze({"value":"#d64bb5ff","ref":"color-pink-400"}),
-    "color-surface-accent-pink-hovered": Object.freeze({"value":"#cf3eacff"}),
     "color-dim-absolute-black": Object.freeze({"value":"#0006","ref":"color-black-40"}),
     "color-dim-absolute-black-hovered": Object.freeze({"value":"#1c1c1c66"}),
     "color-dim-absolute-black-heavy": Object.freeze({"value":"#0009","ref":"color-black-60"}),
@@ -432,8 +412,8 @@ export default Object.freeze({
     "color-dim-absolute-white-heavy-hovered": Object.freeze({"value":"#ededed99"}),
     "color-gradient-green": Object.freeze({"value":"#20ab55ff","ref":"color-green-400"}),
     "color-gradient-green-hovered": Object.freeze({"value":"#219c50ff"}),
-    "color-gradient-green-heavy": Object.freeze({"value":"#4bc16cff","ref":"color-green-300"}),
-    "color-gradient-green-heavy-hovered": Object.freeze({"value":"#44b663ff"}),
+    "color-gradient-green-heavy": Object.freeze({"value":"#51c371ff","ref":"color-green-300"}),
+    "color-gradient-green-heavy-hovered": Object.freeze({"value":"#46ba67ff"}),
     "color-state-default": Object.freeze({"value":"#00000026","ref":"color-black-15"}),
     "color-state-default-hovered": Object.freeze({"value":"#1c1c1c39"}),
     "color-state-action": Object.freeze({"value":"#6157eaff","ref":"color-blue-400"}),

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

@@ -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,63 +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-text-inverse: #000000d9 !default;
-$color-icon-action: #6b6effff !default;
-$color-icon-success: #4bc16cff !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-icon-inverse-heavier: #000000d9 !default;
-$color-fill-neutral-heaviest: #ffffffe6 !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;
@@ -163,7 +163,7 @@ $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;
@@ -172,7 +172,7 @@ $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;
@@ -180,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;
@@ -204,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;
@@ -220,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: #5a5a5fff !default;
 $color-border-neutral: #ffffff1f !default;
 $color-border-neutral-heavy: #fff3 !default;
 $color-border-neutral-heavier: #fff6 !default;
@@ -238,25 +239,14 @@ $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;
-$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-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;
@@ -616,7 +606,8 @@ $tokens: (
           'light': $color-fill-absolute-black-light,
           'transparent': $color-fill-absolute-black-transparent
         )
-      )
+      ),
+      'bright': $color-fill-bright
     ),
     'border': (
       'neutral': (
@@ -646,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,6 +183,7 @@ $color-grey-300: #e2e2e4ff !default;
 $color-grey-400: #cfcfd1ff !default;
 $color-grey-500: #a7a7aaff !default;
 $color-grey-600: #79797eff !default;
+$color-grey-650: #5a5a5fff !default;
 $color-grey-700: #3b3b3fff !default;
 $color-grey-750: #313135ff !default;
 $color-grey-800: #29292dff !default;
@@ -513,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,
@@ -520,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,

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

@@ -117,7 +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: #fffc !default;
+$color-text-inverse: #ffff !default;
 $color-icon-action: #6157eaff !default;
 $color-icon-success: #20ab55ff !default;
 $color-icon-highlight: #3292e3ff !default;
@@ -139,7 +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-icon-inverse-heavier: #ffff !default;
 $color-fill-neutral-heaviest: #000000d9 !default;
 $color-fill-neutral-heavier: #0006 !default;
 $color-fill-neutral-heavy: #00000026 !default;
@@ -220,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;
@@ -238,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;
@@ -616,7 +606,8 @@ $tokens: (
           'light': $color-fill-absolute-black-light,
           'transparent': $color-fill-absolute-black-transparent
         )
-      )
+      ),
+      'bright': $color-fill-bright
     ),
     'border': (
       'neutral': (
@@ -646,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': (