@ornikar/bumper 3.9.1 → 3.10.0

package/dist/index-node-22.22.es.web.mjs

@@ -49,8 +49,9 @@ const colorScales = {
   grey: createColorScale({
     0: '#ffffff',
     1: '#ECECEC',
-    2: '#CDCED0',
-    3: '#A8A8A8',
+    2: '#DCDCDC',
+    3: '#BABABA',
+    4: '#A8A8A8',
     5: '#838383',
     7: '#505050',
     9: '#101010'
@@ -110,97 +111,97 @@ const colorScales = {
 const transformColorScalesToTokens = () => {
   return Object.fromEntries(Object.entries(colorScales).flatMap(([colorName, colorScale]) => {
     return Object.entries(colorScale).map(([scaleNumber, colorValue]) => {
-      return [`${colorName}.${scaleNumber}`, colorValue];
+      return [`palette.${colorName}.${scaleNumber}`, colorValue];
     });
   }));
 };
 const deepPurpleColorPalette = {
   ...transformColorScalesToTokens(),
-  white: '#FFFFFF',
-  black: '#000000',
-  transparent: 'transparent'
+  'palette.white': '#FFFFFF',
+  'palette.black': '#000000',
+  'palette.transparent': 'transparent'
 };
 
 // WARNING
 // https://github.com/ornikar/kitt/blob/79e367e962c957c016c4df67dbcf515c8f45ff0e/@ornikar/kitt-universal/src/themes/late-ocean/colors.ts#L28
 const light = {
   // content
-  'content.base.low': deepPurpleColorPalette['grey.5'],
-  'content.base.mid': deepPurpleColorPalette['grey.7'],
-  'content.base.hi': deepPurpleColorPalette['grey.9'],
-  'content.base.onContrasted.low': deepPurpleColorPalette['white-alpha.60'],
-  'content.base.onContrasted.mid': deepPurpleColorPalette['white-alpha.80'],
-  'content.base.onContrasted.hi': deepPurpleColorPalette['grey.0'],
-  'content.accent': deepPurpleColorPalette['deepPurple.8'],
-  'content.promo': deepPurpleColorPalette['lightning.9'],
-  'content.promo.onContrasted': deepPurpleColorPalette['lightning.5'],
-  'content.info': deepPurpleColorPalette['blue.7'],
-  'content.success': deepPurpleColorPalette['green.7'],
-  'content.warning': deepPurpleColorPalette['yellow.7'],
-  'content.danger': deepPurpleColorPalette['red.7'],
-  'content.muted': deepPurpleColorPalette['beige.6'],
-  'content.disabled': deepPurpleColorPalette['grey.3'],
-  'content.disabled.onContrasted': deepPurpleColorPalette['grey.1'],
+  'content.base.low': deepPurpleColorPalette['palette.grey.5'],
+  'content.base.mid': deepPurpleColorPalette['palette.grey.7'],
+  'content.base.hi': deepPurpleColorPalette['palette.grey.9'],
+  'content.base.onContrasted.low': deepPurpleColorPalette['palette.white-alpha.60'],
+  'content.base.onContrasted.mid': deepPurpleColorPalette['palette.white-alpha.80'],
+  'content.base.onContrasted.hi': deepPurpleColorPalette['palette.grey.0'],
+  'content.accent': deepPurpleColorPalette['palette.deepPurple.8'],
+  'content.promo': deepPurpleColorPalette['palette.lightning.9'],
+  'content.promo.onContrasted': deepPurpleColorPalette['palette.lightning.5'],
+  'content.info': deepPurpleColorPalette['palette.blue.7'],
+  'content.success': deepPurpleColorPalette['palette.green.7'],
+  'content.warning': deepPurpleColorPalette['palette.yellow.7'],
+  'content.danger': deepPurpleColorPalette['palette.red.7'],
+  'content.muted': deepPurpleColorPalette['palette.beige.6'],
+  'content.disabled': deepPurpleColorPalette['palette.grey.4'],
+  'content.disabled.onContrasted': deepPurpleColorPalette['palette.grey.0'],
   // backgrounds
-  'bg.base.low.default': deepPurpleColorPalette['grey.0'],
-  'bg.base.low.pressed': deepPurpleColorPalette['beige.1'],
-  'bg.base.mid.default': deepPurpleColorPalette['beige.1'],
-  'bg.base.mid.pressed': deepPurpleColorPalette['beige.2'],
-  'bg.base.hi.default': deepPurpleColorPalette['beige.2'],
-  'bg.base.hi.pressed': deepPurpleColorPalette['beige.3'],
-  'bg.accent.default': deepPurpleColorPalette['deepPurple.8'],
-  'bg.accent.pressed': deepPurpleColorPalette['deepPurple.7'],
-  'bg.promo.mid.default': deepPurpleColorPalette['lightning.5'],
-  'bg.promo.mid.pressed': deepPurpleColorPalette['lightning.4'],
-  'bg.promo.hi.default': deepPurpleColorPalette['lightning.9'],
-  'bg.promo.hi.pressed': deepPurpleColorPalette['lightning.8'],
-  'bg.highlight.mid.default': deepPurpleColorPalette['mauve.1'],
-  'bg.highlight.mid.pressed': deepPurpleColorPalette['mauve.2'],
-  'bg.highlight.hi.default': deepPurpleColorPalette['mauve.3'],
-  'bg.highlight.hi.pressed': deepPurpleColorPalette['mauve.4'],
-  'bg.info.mid': deepPurpleColorPalette['blue.1'],
-  'bg.info.hi': deepPurpleColorPalette['blue.6'],
-  'bg.success.mid': deepPurpleColorPalette['green.1'],
-  'bg.success.hi': deepPurpleColorPalette['green.6'],
-  'bg.warning.mid': deepPurpleColorPalette['yellow.1'],
-  'bg.warning.hi': deepPurpleColorPalette['yellow.6'],
-  'bg.danger.mid': deepPurpleColorPalette['red.1'],
-  'bg.danger.hi': deepPurpleColorPalette['red.6'],
-  'bg.disabled.mid': deepPurpleColorPalette['grey.1'],
-  'bg.disabled.hi': deepPurpleColorPalette['grey.3'],
-  'bg.overlay': deepPurpleColorPalette['grey-alpha.50'],
+  'bg.base.low.default': deepPurpleColorPalette['palette.grey.0'],
+  'bg.base.low.pressed': deepPurpleColorPalette['palette.beige.1'],
+  'bg.base.mid.default': deepPurpleColorPalette['palette.beige.1'],
+  'bg.base.mid.pressed': deepPurpleColorPalette['palette.beige.2'],
+  'bg.base.hi.default': deepPurpleColorPalette['palette.beige.2'],
+  'bg.base.hi.pressed': deepPurpleColorPalette['palette.beige.3'],
+  'bg.accent.default': deepPurpleColorPalette['palette.deepPurple.8'],
+  'bg.accent.pressed': deepPurpleColorPalette['palette.deepPurple.7'],
+  'bg.promo.mid.default': deepPurpleColorPalette['palette.lightning.5'],
+  'bg.promo.mid.pressed': deepPurpleColorPalette['palette.lightning.4'],
+  'bg.promo.hi.default': deepPurpleColorPalette['palette.lightning.9'],
+  'bg.promo.hi.pressed': deepPurpleColorPalette['palette.lightning.8'],
+  'bg.highlight.mid.default': deepPurpleColorPalette['palette.mauve.1'],
+  'bg.highlight.mid.pressed': deepPurpleColorPalette['palette.mauve.2'],
+  'bg.highlight.hi.default': deepPurpleColorPalette['palette.mauve.3'],
+  'bg.highlight.hi.pressed': deepPurpleColorPalette['palette.mauve.4'],
+  'bg.info.mid': deepPurpleColorPalette['palette.blue.1'],
+  'bg.info.hi': deepPurpleColorPalette['palette.blue.6'],
+  'bg.success.mid': deepPurpleColorPalette['palette.green.1'],
+  'bg.success.hi': deepPurpleColorPalette['palette.green.6'],
+  'bg.warning.mid': deepPurpleColorPalette['palette.yellow.1'],
+  'bg.warning.hi': deepPurpleColorPalette['palette.yellow.6'],
+  'bg.danger.mid': deepPurpleColorPalette['palette.red.1'],
+  'bg.danger.hi': deepPurpleColorPalette['palette.red.6'],
+  'bg.disabled.mid': deepPurpleColorPalette['palette.grey.1'],
+  'bg.disabled.hi': deepPurpleColorPalette['palette.grey.3'],
+  'bg.overlay': deepPurpleColorPalette['palette.grey-alpha.50'],
   // borders
-  'border.base.low': deepPurpleColorPalette['beige.2'],
-  'border.base.mid': deepPurpleColorPalette['beige.3'],
-  'border.base.hi': deepPurpleColorPalette['grey.9'],
-  'border.base.onContrasted.mid': deepPurpleColorPalette['white-alpha.20'],
-  'border.base.onContrasted.hi': deepPurpleColorPalette['grey.0'],
-  'border.base.accent': deepPurpleColorPalette['deepPurple.8'],
-  'border.info': deepPurpleColorPalette['blue.6'],
-  'border.success': deepPurpleColorPalette['green.6'],
-  'border.warning': deepPurpleColorPalette['yellow.6'],
-  'border.danger': deepPurpleColorPalette['red.6'],
-  'border.disabled': deepPurpleColorPalette['grey.2'],
-  'border.highlight': deepPurpleColorPalette['mauve.3'],
-  'border.focus': deepPurpleColorPalette['blue.4'],
-  'border.transparent': deepPurpleColorPalette.transparent,
+  'border.base.low': deepPurpleColorPalette['palette.beige.2'],
+  'border.base.mid': deepPurpleColorPalette['palette.beige.3'],
+  'border.base.hi': deepPurpleColorPalette['palette.grey.9'],
+  'border.base.onContrasted.mid': deepPurpleColorPalette['palette.white-alpha.20'],
+  'border.base.onContrasted.hi': deepPurpleColorPalette['palette.grey.0'],
+  'border.base.accent': deepPurpleColorPalette['palette.deepPurple.8'],
+  'border.info': deepPurpleColorPalette['palette.blue.6'],
+  'border.success': deepPurpleColorPalette['palette.green.6'],
+  'border.warning': deepPurpleColorPalette['palette.yellow.6'],
+  'border.danger': deepPurpleColorPalette['palette.red.6'],
+  'border.disabled': deepPurpleColorPalette['palette.grey.2'],
+  'border.highlight': deepPurpleColorPalette['palette.mauve.3'],
+  'border.focus': deepPurpleColorPalette['palette.blue.4'],
+  'border.transparent': deepPurpleColorPalette['palette.transparent'],
   // Buttons
-  'button.bg.primary.default': deepPurpleColorPalette['deepPurple.8'],
-  'button.bg.primary.pressed': deepPurpleColorPalette['deepPurple.7'],
-  'button.bg.primary.onContrasted.default': deepPurpleColorPalette['grey.0'],
-  'button.bg.primary.onContrasted.pressed': deepPurpleColorPalette['white-alpha.80'],
-  'button.bg.secondary.default': deepPurpleColorPalette.transparent,
-  'button.bg.secondary.pressed': deepPurpleColorPalette['deepPurple-alpha.10'],
-  'button.bg.secondary.onContrasted.default': deepPurpleColorPalette.transparent,
-  'button.bg.secondary.onContrasted.pressed': deepPurpleColorPalette['white-alpha.10'],
-  'button.bg.tertiary.default': deepPurpleColorPalette.transparent,
-  'button.bg.tertiary.pressed': deepPurpleColorPalette['deepPurple-alpha.10'],
-  'button.bg.tertiary.onContrasted.default': deepPurpleColorPalette.transparent,
-  'button.bg.tertiary.onContrasted.pressed': deepPurpleColorPalette['white-alpha.10'],
-  'button.bg.danger.default': deepPurpleColorPalette.transparent,
-  'button.bg.danger.pressed': deepPurpleColorPalette['red.1'],
-  'button.bg.danger.onContrasted.default': deepPurpleColorPalette.white,
-  'button.bg.danger.onContrasted.pressed': deepPurpleColorPalette['red.1']
+  'button.bg.primary.default': deepPurpleColorPalette['palette.deepPurple.8'],
+  'button.bg.primary.pressed': deepPurpleColorPalette['palette.deepPurple.7'],
+  'button.bg.primary.onContrasted.default': deepPurpleColorPalette['palette.grey.0'],
+  'button.bg.primary.onContrasted.pressed': deepPurpleColorPalette['palette.white-alpha.80'],
+  'button.bg.secondary.default': deepPurpleColorPalette['palette.transparent'],
+  'button.bg.secondary.pressed': deepPurpleColorPalette['palette.deepPurple-alpha.10'],
+  'button.bg.secondary.onContrasted.default': deepPurpleColorPalette['palette.transparent'],
+  'button.bg.secondary.onContrasted.pressed': deepPurpleColorPalette['palette.white-alpha.10'],
+  'button.bg.tertiary.default': deepPurpleColorPalette['palette.transparent'],
+  'button.bg.tertiary.pressed': deepPurpleColorPalette['palette.deepPurple-alpha.10'],
+  'button.bg.tertiary.onContrasted.default': deepPurpleColorPalette['palette.transparent'],
+  'button.bg.tertiary.onContrasted.pressed': deepPurpleColorPalette['palette.white-alpha.10'],
+  'button.bg.danger.default': deepPurpleColorPalette['palette.transparent'],
+  'button.bg.danger.pressed': deepPurpleColorPalette['palette.red.1'],
+  'button.bg.danger.onContrasted.default': deepPurpleColorPalette['palette.white'],
+  'button.bg.danger.onContrasted.pressed': deepPurpleColorPalette['palette.red.1']
 };
 
 const themes = {
@@ -405,7 +406,7 @@ const GTStandardNarrowFont = createFont({
   face: GTStandardNarrowFaces
 });
 const tokens = createTokens({
-  color: {},
+  color: deepPurpleColorPalette,
   space: spaceTokens,
   size: sizeTokens,
   radius: radiusTokens,
@@ -849,7 +850,7 @@ const context = createStyledContext({
 
 function getButtonContentColor(type, disabled, isOnContrasted) {
   if (disabled) {
-    return '$content.disabled';
+    return type === 'primary' ? '$content.disabled.onContrasted' : '$content.disabled';
   }
   switch (type) {
     case 'secondary':
@@ -1015,7 +1016,7 @@ const InternalButtonFrame = styled(HStack, {
         if (disabled) {
           return {
             ...commonTypeStyle,
-            backgroundColor: '$bg.disabled.mid'
+            backgroundColor: '$bg.disabled.hi'
           };
         }
       }