@ornikar/bumper 2.2.1 → 2.4.0

package/src/themes/palettes/__snapshots__/deepPurpleColorPalette.stories.tsx.snap

@@ -2093,12 +2093,12 @@ exports[`bumper/Core Tokens Deep Purple Palette 1`] = `
         }
         suppressHighlighting={true}
       >
-        #F14847
+        #E2483D
       </Text>
       <View
         style={
           {
-            "backgroundColor": "#F14847",
+            "backgroundColor": "#E2483D",
             "height": 20,
             "width": 20,
           }
@@ -2149,6 +2149,182 @@ exports[`bumper/Core Tokens Deep Purple Palette 1`] = `
         }
       />
     </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#EAE3D6",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "paddingBottom": 8,
+          "paddingLeft": 8,
+          "paddingRight": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        mauve.1
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #F8E7FF
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#F8E7FF",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#EAE3D6",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "paddingBottom": 8,
+          "paddingLeft": 8,
+          "paddingRight": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        mauve.2
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #F1D0FB
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#F1D0FB",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#EAE3D6",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "paddingBottom": 8,
+          "paddingLeft": 8,
+          "paddingRight": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        mauve.3
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #E4A4F9
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#E4A4F9",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#EAE3D6",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "paddingBottom": 8,
+          "paddingLeft": 8,
+          "paddingRight": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        mauve.4
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #D283EC
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#D283EC",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
     <View
       style={
         {

package/src/themes/palettes/__snapshots_web__/deepPurpleColorPalette.stories.tsx.snap

@@ -913,10 +913,10 @@ exports[`bumper/Core Tokens Deep Purple Palette 1`] = `
                 class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
                 data-disable-theme="true"
               >
-                #F14847
+                #E2483D
               </span>
               <div
-                class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-F1484735 _width-t-size-20 _height-t-size-20"
+                class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-E2483D35 _width-t-size-20 _height-t-size-20"
               />
             </div>
             <div
@@ -938,6 +938,82 @@ exports[`bumper/Core Tokens Deep Purple Palette 1`] = `
                 class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-BD100F35 _width-t-size-20 _height-t-size-20"
               />
             </div>
+            <div
+              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _paddingTop-t-space-8 _paddingRight-t-space-8 _paddingBottom-t-space-8 _paddingLeft-t-space-8 _borderBottomWidth-t-space-2 _borderBottomColor-border--bas1360415901 _backgroundColor-bg--base--l872590407 _borderBottomStyle-solid"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
+                data-disable-theme="true"
+              >
+                mauve.1
+              </span>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
+                data-disable-theme="true"
+              >
+                #F8E7FF
+              </span>
+              <div
+                class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-F8E7FF35 _width-t-size-20 _height-t-size-20"
+              />
+            </div>
+            <div
+              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _paddingTop-t-space-8 _paddingRight-t-space-8 _paddingBottom-t-space-8 _paddingLeft-t-space-8 _borderBottomWidth-t-space-2 _borderBottomColor-border--bas1360415901 _backgroundColor-bg--base--l872590407 _borderBottomStyle-solid"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
+                data-disable-theme="true"
+              >
+                mauve.2
+              </span>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
+                data-disable-theme="true"
+              >
+                #F1D0FB
+              </span>
+              <div
+                class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-F1D0FB35 _width-t-size-20 _height-t-size-20"
+              />
+            </div>
+            <div
+              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _paddingTop-t-space-8 _paddingRight-t-space-8 _paddingBottom-t-space-8 _paddingLeft-t-space-8 _borderBottomWidth-t-space-2 _borderBottomColor-border--bas1360415901 _backgroundColor-bg--base--l872590407 _borderBottomStyle-solid"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
+                data-disable-theme="true"
+              >
+                mauve.3
+              </span>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
+                data-disable-theme="true"
+              >
+                #E4A4F9
+              </span>
+              <div
+                class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-E4A4F935 _width-t-size-20 _height-t-size-20"
+              />
+            </div>
+            <div
+              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _paddingTop-t-space-8 _paddingRight-t-space-8 _paddingBottom-t-space-8 _paddingLeft-t-space-8 _borderBottomWidth-t-space-2 _borderBottomColor-border--bas1360415901 _backgroundColor-bg--base--l872590407 _borderBottomStyle-solid"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
+                data-disable-theme="true"
+              >
+                mauve.4
+              </span>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
+                data-disable-theme="true"
+              >
+                #D283EC
+              </span>
+              <div
+                class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-D283EC35 _width-t-size-20 _height-t-size-20"
+              />
+            </div>
             <div
               class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _paddingTop-t-space-8 _paddingRight-t-space-8 _paddingBottom-t-space-8 _paddingLeft-t-space-8 _borderBottomWidth-t-space-2 _borderBottomColor-border--bas1360415901 _backgroundColor-bg--base--l872590407 _borderBottomStyle-solid"
             >

package/src/themes/palettes/deepPurpleColorPalette.ts

@@ -20,6 +20,7 @@ interface ColorScaleKeysMap {
   green: 1 | 2 | 6 | 7;
   yellow: 1 | 2 | 6 | 7;
   red: 1 | 2 | 6 | 7;
+  mauve: 1 | 2 | 3 | 4;
   'beige-alpha': '25' | '40' | '50';
   'grey-alpha': '25' | '35' | '50';
   'white-alpha': '10' | '20' | '60' | '80' | '90';
@@ -109,9 +110,15 @@ export const colorScales: ColorScales = {
   red: createColorScale({
     1: '#FDE4E3',
     2: '#FAB8B8',
-    6: '#F14847',
+    6: '#E2483D',
     7: '#BD100F',
   }),
+  mauve: createColorScale({
+    1: '#F8E7FF',
+    2: '#F1D0FB',
+    3: '#E4A4F9',
+    4: '#D283EC',
+  }),
   'beige-alpha': createColorScale({
     '25': '#C1B59F40',
     '40': '#C1B59F66',