@flodesk/grain 6.12.2 → 6.13.0

package/es/styles/colors/semantics.css

@@ -0,0 +1,68 @@
+:root {
+  --grn-color-warning: var(--grn-color-yellow);
+  --grn-color-danger: var(--grn-color-red);
+  --grn-color-success: var(--grn-color-green);
+  --grn-color-selection: var(--grn-color-blue);
+  --grn-color-backdrop: var(--grn-color-fade7);
+}
+
+/* light */
+
+:root, [data-theme="light"] {
+  --borderL: 0%;
+  --iconInvertL: 100%;
+  --iconInvertA: 70%;
+  --dangerButtonBackgroundHoverL: 68%;
+  --dangerButtonBackgroundActiveL: 70%;
+  --grn-color-floatingBackground: var(--white);
+}
+
+/* dark */
+
+[data-theme="dark"] {
+  --borderL: 100%;
+  --iconInvertL: 0%;
+  --iconInvertA: 40%;
+  --dangerButtonBackgroundHoverL: 62%;
+  --dangerButtonBackgroundActiveL: 58%;
+  --grn-color-floatingBackground: var(--grn-color-shade2);
+}
+
+/* light + dark */
+
+:root, [data-theme] {
+  --grn-color-content: var(--grn-color-shade12);
+  --grn-color-content2: var(--grn-color-fade7);
+  --grn-color-content3: var(--grn-color-fade5);
+  --grn-color-contentInvert: var(--grn-color-shade2);
+
+  --grn-color-background: var(--grn-color-shade1);
+  --grn-color-background2: var(--grn-color-shade2);
+  --grn-color-background3: var(--grn-color-shade3);
+
+  --grn-color-border: hsl(var(--HS) var(--borderL) / 10%);
+  --grn-color-border2: hsl(var(--HS) var(--borderL) / 16%);
+
+  --grn-color-accent: var(--grn-color-shade12);
+  --grn-color-backgroundOverlay: var(--grn-color-fade1);
+
+  --grn-color-icon: var(--grn-color-fade6);
+  --grn-color-iconInvert: hsl(var(--HS) var(--iconInvertL) / var(--iconInvertA));
+
+  --grn-color-contentDisabled: var(--grn-color-shade7);
+  --grn-color-backgroundDisabled: var(--grn-color-shade4);
+
+  --grn-color-neutralButtonBorder: var(--grn-color-fade4);
+  --grn-color-neutralButtonBorderHover: var(--grn-color-fade6);
+  --grn-color-neutralButtonBorderActive: var(--grn-color-shade8);
+
+  --grn-color-accentButtonBackground: var(--grn-color-shade12);
+  --grn-color-accentButtonBackgroundHover: var(--grn-color-shade10);
+  --grn-color-accentButtonBackgroundActive: var(--grn-color-shade9);
+  --grn-color-accentButtonContent: var(--grn-color-contentInvert);
+
+  --grn-color-dangerButtonBackground: var(--grn-color-danger);
+  --grn-color-dangerButtonBackgroundHover: hsl(var(--redHS) var(--dangerButtonBackgroundHoverL));
+  --grn-color-dangerButtonBackgroundActive: hsl(var(--redHS) var(--dangerButtonBackgroundActiveL));
+  --grn-color-dangerButtonContent: var(--white);
+}

package/es/styles/colors/shades.css

@@ -0,0 +1,109 @@
+:root {
+  --grn-color-shadeTone12: hsl(0 0% 5%);
+  --grn-color-shadeTone11: hsl(0 0% 7%);
+  --grn-color-shadeTone10: hsl(0 0% 11%);
+  --grn-color-shadeTone9: hsl(0 0% 16%);
+  --grn-color-shadeTone8: hsl(0 0% 24%);
+  --grn-color-shadeTone7: hsl(0 0% 35%);
+  --grn-color-shadeTone6: hsl(0 0% 50%);
+  --grn-color-shadeTone5: hsl(0 0% 69%);
+  --grn-color-shadeTone4: hsl(0 0% 82%);
+  --grn-color-shadeTone3: hsl(0 0% 90%);
+  --grn-color-shadeTone2: hsl(0 0% 95%);
+  --grn-color-shadeTone1: hsl(0 0% 98%);
+}
+
+:root {
+  --fadeA10: 70%;
+  --fadeA9: 63%;
+  --fadeA8: 56%;
+  --fadeA7: 49%;
+  --fadeA6: 42%;
+  --fadeA5: 35%;
+  --fadeA4: 28%;
+  --fadeA3: 21%;
+  --fadeA2: 14%;
+  --fadeA1: 7%;
+
+  --grn-color-whiteFade10: hsl(0 0% 100% / var(--fadeA10));
+  --grn-color-whiteFade9: hsl(0 0% 100% / var(--fadeA9));
+  --grn-color-whiteFade8: hsl(0 0% 100% / var(--fadeA8));
+  --grn-color-whiteFade7: hsl(0 0% 100% / var(--fadeA7));
+  --grn-color-whiteFade6: hsl(0 0% 100% / var(--fadeA6));
+  --grn-color-whiteFade5: hsl(0 0% 100% / var(--fadeA5));
+  --grn-color-whiteFade4: hsl(0 0% 100% / var(--fadeA4));
+  --grn-color-whiteFade3: hsl(0 0% 100% / var(--fadeA3));
+  --grn-color-whiteFade2: hsl(0 0% 100% / var(--fadeA2));
+  --grn-color-whiteFade1: hsl(0 0% 100% / var(--fadeA1));
+
+  --grn-color-blackFade10: hsl(0 0% 0% / var(--fadeA10));
+  --grn-color-blackFade9: hsl(0 0% 0% / var(--fadeA9));
+  --grn-color-blackFade8: hsl(0 0% 0% / var(--fadeA8));
+  --grn-color-blackFade7: hsl(0 0% 0% / var(--fadeA7));
+  --grn-color-blackFade6: hsl(0 0% 0% / var(--fadeA6));
+  --grn-color-blackFade5: hsl(0 0% 0% / var(--fadeA5));
+  --grn-color-blackFade4: hsl(0 0% 0% / var(--fadeA4));
+  --grn-color-blackFade3: hsl(0 0% 0% / var(--fadeA3));
+  --grn-color-blackFade2: hsl(0 0% 0% / var(--fadeA2));
+  --grn-color-blackFade1: hsl(0 0% 0% / var(--fadeA1));
+}
+
+/* light */
+
+:root, [data-theme="light"] {
+  --grn-color-fade10: var(--grn-color-blackFade10);
+  --grn-color-fade9: var(--grn-color-blackFade9);
+  --grn-color-fade8: var(--grn-color-blackFade8);
+  --grn-color-fade8: var(--grn-color-blackFade8);
+  --grn-color-fade7: var(--grn-color-blackFade7);
+  --grn-color-fade6: var(--grn-color-blackFade6);
+  --grn-color-fade5: var(--grn-color-blackFade5);
+  --grn-color-fade4: var(--grn-color-blackFade4);
+  --grn-color-fade3: var(--grn-color-blackFade3);
+  --grn-color-fade2: var(--grn-color-blackFade2);
+  --grn-color-fade1: var(--grn-color-blackFade1);
+
+  --grn-color-shade1: var(--white);
+  --grn-color-shade2: var(--grn-color-shadeTone1);
+  --grn-color-shade3: var(--grn-color-shadeTone2);
+  --grn-color-shade4: var(--grn-color-shadeTone3);
+  --grn-color-shade5: var(--grn-color-shadeTone4);
+  --grn-color-shade6: var(--grn-color-shadeTone5);
+  --grn-color-shade7: var(--grn-color-shadeTone6);
+  --grn-color-shade8: var(--grn-color-shadeTone7);
+  --grn-color-shade9: var(--grn-color-shadeTone8);
+  --grn-color-shade10: var(--grn-color-shadeTone9);
+  --grn-color-shade11: var(--grn-color-shadeTone10);
+  --grn-color-shade12: var(--grn-color-shadeTone11);
+  --grn-color-shade13: var(--grn-color-shadeTone12);
+}
+
+/* dark */
+
+[data-theme="dark"] {
+  --grn-color-fade10: var(--grn-color-whiteFade10);
+  --grn-color-fade9: var(--grn-color-whiteFade9);
+  --grn-color-fade8: var(--grn-color-whiteFade8);
+  --grn-color-fade8: var(--grn-color-whiteFade8);
+  --grn-color-fade7: var(--grn-color-whiteFade7);
+  --grn-color-fade6: var(--grn-color-whiteFade6);
+  --grn-color-fade5: var(--grn-color-whiteFade5);
+  --grn-color-fade4: var(--grn-color-whiteFade4);
+  --grn-color-fade3: var(--grn-color-whiteFade3);
+  --grn-color-fade2: var(--grn-color-whiteFade2);
+  --grn-color-fade1: var(--grn-color-whiteFade1);
+
+  --grn-color-shade1: var(--grn-color-shadeTone12);
+  --grn-color-shade2: var(--grn-color-shadeTone11);
+  --grn-color-shade3: var(--grn-color-shadeTone10);
+  --grn-color-shade4: var(--grn-color-shadeTone9);
+  --grn-color-shade5: var(--grn-color-shadeTone8);
+  --grn-color-shade6: var(--grn-color-shadeTone7);
+  --grn-color-shade7: var(--grn-color-shadeTone6);
+  --grn-color-shade8: var(--grn-color-shadeTone5);
+  --grn-color-shade9: var(--grn-color-shadeTone4);
+  --grn-color-shade10: var(--grn-color-shadeTone3);
+  --grn-color-shade11: var(--grn-color-shadeTone2);
+  --grn-color-shade12: var(--grn-color-shadeTone1);
+  --grn-color-shade13: var(--white);
+}

package/es/styles/variables.css

@@ -47,24 +47,30 @@
   --grn-transition-xxFast: 80ms;
 }
 
-:root {
+/* shadow opacity ratio */
+:root { --sor: 1 }
+[data-theme="dark"] { --sor: 20 }
+
+:root, [data-theme="dark"] {
+  --HSL: 0 0% 0%;
+
   --grn-shadow-s:
-    0 0px 2px hsl(0 0% 0% / 6%),
-    0 1px 4px hsl(0 0% 0% / 3%),
-    0 2px 8px hsl(0 0% 0% / 2%),
-    0 4px 16px hsl(0 0% 0% / 2%)
+    0 0px 2px hsl(var(--HSL) / calc(5% * var(--sor))),
+    0 1px 4px hsl(var(--HSL) / calc(3% * var(--sor))),
+    0 2px 8px hsl(var(--HSL) / calc(2% * var(--sor))),
+    0 4px 16px hsl(var(--HSL) / calc(2% * var(--sor)))
   ;
 
   --grn-shadow-m:
     var(--grn-shadow-s),
-    0 8px 32px hsl(0 0% 0% / 4%)
+    0 8px 32px hsl(var(--HSL) / calc(4% * var(--sor)))
   ;
 
   --grn-shadow-l:
     var(--grn-shadow-m),
-    0 16px 64px hsl(0 0% 0% / 4%),
-    0 32px 128px hsl(0 0% 0% / 5%),
-    0 64px 128px -32px hsl(0 0% 0% / 5%)
+    0 16px 64px hsl(var(--HSL) / calc(4% * var(--sor))),
+    0 32px 128px hsl(var(--HSL) / calc(5% * var(--sor))),
+    0 64px 128px -32px hsl(var(--HSL) / calc(5% * var(--sor)))
   ;
 }
 

package/es/variables/vars.js

@@ -26,7 +26,38 @@ export var colors = {
     grey2: 'grey2',
     grey1: 'grey1'
   },
+  shadeTones: {
+    shadeTone12: 'shadeTone12',
+    shadeTone11: 'shadeTone11',
+    shadeTone10: 'shadeTone10',
+    shadeTone9: 'shadeTone9',
+    shadeTone8: 'shadeTone8',
+    shadeTone7: 'shadeTone7',
+    shadeTone6: 'shadeTone6',
+    shadeTone5: 'shadeTone5',
+    shadeTone4: 'shadeTone4',
+    shadeTone3: 'shadeTone3',
+    shadeTone2: 'shadeTone2',
+    shadeTone1: 'shadeTone1'
+  },
+  shades: {
+    shade13: 'shade13',
+    shade12: 'shade12',
+    shade11: 'shade11',
+    shade10: 'shade10',
+    shade9: 'shade9',
+    shade8: 'shade8',
+    shade7: 'shade7',
+    shade6: 'shade6',
+    shade5: 'shade5',
+    shade4: 'shade4',
+    shade3: 'shade3',
+    shade2: 'shade2',
+    shade1: 'shade1'
+  },
   fades: {
+    fade9: 'fade9',
+    fade8: 'fade8',
     fade7: 'fade7',
     fade6: 'fade6',
     fade5: 'fade5',
@@ -49,7 +80,20 @@ export var colors = {
       backgroundDisabled: 'backgroundDisabled',
       icon: 'icon',
       iconInvert: 'iconInvert',
-      contentInvert: 'contentInvert'
+      contentInvert: 'contentInvert',
+      backdrop: 'backdrop',
+      floatingBackground: 'floatingBackground',
+      accentButtonBackground: 'accentButtonBackground',
+      accentButtonBackgroundHover: 'accentButtonBackgroundHover',
+      accentButtonBackgroundActive: 'accentButtonBackgroundActive',
+      accentButtonContent: 'accentButtonContent',
+      dangerButtonBackground: 'dangerButtonBackground',
+      dangerButtonBackgroundHover: 'dangerButtonBackgroundHover',
+      dangerButtonBackgroundActive: 'dangerButtonBackgroundActive',
+      dangerButtonContent: 'dangerButtonContent',
+      neutralButtonBorder: 'neutralButtonBorder',
+      neutralButtonBorderHover: 'neutralButtonBorderHover',
+      neutralButtonBorderActive: 'neutralButtonBorderActive'
     },
     generic: {
       warning: 'warning',
@@ -117,7 +161,7 @@ export var vars = {
     xFast: 'xFast',
     xxFast: 'xxFast'
   },
-  colors: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colors.greys), colors.fades), colors.bases), colors.semantics.internal), colors.semantics.generic), colors.semantics.content), colors.semantics.background), colors.semantics.border),
+  colors: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colors.greys), colors.shadeTones), colors.shades), colors.fades), colors.bases), colors.semantics.internal), colors.semantics.generic), colors.semantics.content), colors.semantics.background), colors.semantics.border),
   utils: {
     formTitleAndContentGap: 'formTitleAndContentGap',
     formContentsGap: 'formContentsGap',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "6.12.2",
+  "version": "6.13.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",

package/es/styles/colors.css

@@ -1,61 +0,0 @@
-:root {
-  --HS: 0 0%;
-  --HSL: var(--HS) 7%;
-
-  --grn-color-grey8: hsl(var(--HSL));
-  --grn-color-grey7: hsl(var(--HS) 20%);
-  --grn-color-grey6: hsl(var(--HS) 32%);
-  --grn-color-grey5: hsl(var(--HS) 50%);
-  --grn-color-grey4: hsl(var(--HS) 66%);
-  --grn-color-grey3: hsl(var(--HS) 83%);
-  --grn-color-grey2: hsl(var(--HS) 93%);
-  --grn-color-grey1: hsl(var(--HS) 98%);
-}
-
-:root {
-  --grn-color-fade7: hsl(var(--HS) 0% / 49%);
-  --grn-color-fade6: hsl(var(--HS) 0% / 42%);
-  --grn-color-fade5: hsl(var(--HS) 0% / 35%);
-  --grn-color-fade4: hsl(var(--HS) 0% / 28%);
-  --grn-color-fade3: hsl(var(--HS) 0% / 21%);
-  --grn-color-fade2: hsl(var(--HS) 0% / 14%);
-  --grn-color-fade1: hsl(var(--HS) 0% / 7%);
-}
-
-:root {
-  --grn-color-blue: hsl(218 74% 54%);
-  --grn-color-red: hsl(6 66% 65%);
-  --grn-color-yellow: hsl(44, 99%, 59%);
-  --grn-color-green: hsl(153, 22%, 57%);
-}
-
-:root {
-  /* internal */
-  --grn-color-accent: var(--grn-color-grey8);
-  --grn-color-backgroundOverlay: var(--grn-color-fade1);
-  --grn-color-contentDisabled: var(--grn-color-grey5);
-  --grn-color-backgroundDisabled: var(--grn-color-fade1);
-  --grn-color-icon: hsl(var(--HS) 0% / 40%);
-  --grn-color-iconInvert: hsl(var(--HS) 100% / 70%);
-  --grn-color-contentInvert: hsl(var(--HS) 100% / 95%);
-
-  /* generic */
-  --grn-color-warning: var(--grn-color-yellow);
-  --grn-color-danger: var(--grn-color-red);
-  --grn-color-success: var(--grn-color-green);
-  --grn-color-selection: var(--grn-color-blue);
-
-  /* content */
-  --grn-color-content: var(--grn-color-grey8);
-  --grn-color-content2: var(--grn-color-fade7);
-  --grn-color-content3: var(--grn-color-fade5);
-
-  /* background */
-  --grn-color-background: hsl(0 0% 100% / 100%);
-  --grn-color-background2: var(--grn-color-grey1);
-  --grn-color-background3: var(--grn-color-grey2);
-
-  /* border */
-  --grn-color-border: hsl(var(--HS) 0% / 10%);
-  --grn-color-border2: hsl(var(--HS) 0% / 16%);
-}