@ornikar/bumper 2.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",

package/src/themes/__snapshots__/light.stories.tsx.snap

@@ -41,7 +41,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -84,7 +84,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -127,7 +127,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -170,7 +170,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#563B56",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -213,7 +213,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#563B56",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -256,7 +256,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#563B56",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -299,7 +299,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -342,7 +342,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -385,7 +385,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#563B56",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -428,7 +428,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -471,7 +471,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -514,7 +514,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -557,7 +557,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -600,7 +600,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -643,7 +643,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -686,7 +686,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#563B56",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -729,7 +729,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -772,7 +772,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -815,7 +815,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -858,7 +858,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -901,7 +901,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -944,7 +944,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -987,7 +987,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1030,7 +1030,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1073,7 +1073,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1116,7 +1116,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1159,7 +1159,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1202,7 +1202,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1245,7 +1245,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1288,7 +1288,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1331,7 +1331,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1374,7 +1374,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1417,7 +1417,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1460,7 +1460,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1503,7 +1503,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1546,7 +1546,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1589,7 +1589,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1632,7 +1632,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1675,7 +1675,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1718,7 +1718,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1761,7 +1761,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1804,7 +1804,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1847,7 +1847,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1874,12 +1874,12 @@ exports[`bumper/Theme Light 1`] = `
         }
         suppressHighlighting={true}
       >
-        #A8A8A8
+        #EAE3D6
       </Text>
       <View
         style={
           {
-            "backgroundColor": "#A8A8A8",
+            "backgroundColor": "#EAE3D6",
             "height": 20,
             "width": 20,
           }
@@ -1890,7 +1890,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#563B56",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1933,7 +1933,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#563B56",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -1960,12 +1960,55 @@ exports[`bumper/Theme Light 1`] = `
         }
         suppressHighlighting={true}
       >
-        #FFFFFF99
+        #FFFFFF33
       </Text>
       <View
         style={
           {
-            "backgroundColor": "#FFFFFF99",
+            "backgroundColor": "#FFFFFF33",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#EAE3D6",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.base.accent
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #563B56
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#563B56",
             "height": 20,
             "width": 20,
           }
@@ -1976,7 +2019,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -2019,7 +2062,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -2062,7 +2105,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -2105,7 +2148,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",
@@ -2148,7 +2191,7 @@ exports[`bumper/Theme Light 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderBottomColor": "#A8A8A8",
+          "borderBottomColor": "#EAE3D6",
           "borderBottomWidth": 2,
           "borderStyle": "solid",
           "flexDirection": "column",

package/src/themes/__snapshots_web__/light.stories.tsx.snap

@@ -837,10 +837,10 @@ exports[`bumper/Theme Light 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"
               >
-                #A8A8A8
+                #EAE3D6
               </span>
               <div
-                class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-A8A8A835 _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-EAE3D635 _width-t-size-20 _height-t-size-20"
               />
             </div>
             <div
@@ -875,10 +875,29 @@ exports[`bumper/Theme Light 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"
               >
-                #FFFFFF99
+                #FFFFFF33
               </span>
               <div
-                class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-FFFFFF9935 _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-FFFFFF3335 _width-t-size-20 _height-t-size-20"
+              />
+            </div>
+            <div
+              class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _paddingTop-t-space-8 _paddingBottom-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"
+              >
+                border.base.accent
+              </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"
+              >
+                #563B56
+              </span>
+              <div
+                class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-563B5635 _width-t-size-20 _height-t-size-20"
               />
             </div>
             <div

package/src/themes/light.ts

@@ -1,5 +1,8 @@
 import { deepPurpleColorPalette } from './palettes/deepPurpleColorPalette';
 
+// WARNING
+// If you modify this theme, don't forget to update the theme in @ornikar/kitt-universal as well
+// https://github.com/ornikar/kitt/blob/79e367e962c957c016c4df67dbcf515c8f45ff0e/@ornikar/kitt-universal/src/themes/late-ocean/colors.ts#L28
 export const light = {
   // content
   'content.base.hi': deepPurpleColorPalette['grey.9'],
@@ -48,9 +51,10 @@ export const light = {
 
   // borders
   'border.base.hi': deepPurpleColorPalette['grey.9'],
-  'border.base.mid': deepPurpleColorPalette['grey.3'],
+  'border.base.mid': deepPurpleColorPalette['beige.3'],
   'border.base.onContrasted.hi': deepPurpleColorPalette['grey.0'],
-  'border.base.onContrasted.mid': deepPurpleColorPalette['white-alpha.60'],
+  'border.base.onContrasted.mid': deepPurpleColorPalette['white-alpha.20'],
+  'border.base.accent': deepPurpleColorPalette['deepPurple.8'],
   'border.info': deepPurpleColorPalette['blue.6'],
   'border.success': deepPurpleColorPalette['green.6'],
   'border.warning': deepPurpleColorPalette['yellow.6'],