@flodesk/grain 6.14.0 → 6.14.2

package/es/styles/colors/{shades.css → theme.css}

@@ -1,57 +1,6 @@
-:root {
-  --grn-color-shadeTone13: hsl(0 0% 5%);
-  --grn-color-shadeTone12: hsl(0 0% 7%);
-  --grn-color-shadeTone11: hsl(0 0% 11%);
-  --grn-color-shadeTone10: hsl(0 0% 16%);
-  --grn-color-shadeTone9: hsl(0 0% 24%);
-  --grn-color-shadeTone8: hsl(0 0% 35%);
-  --grn-color-shadeTone7: hsl(0 0% 50%);
-  --grn-color-shadeTone6: hsl(0 0% 69%);
-  --grn-color-shadeTone5: hsl(0 0% 82%);
-  --grn-color-shadeTone4: hsl(0 0% 90%);
-  --grn-color-shadeTone3: hsl(0 0% 95%);
-  --grn-color-shadeTone2: hsl(0 0% 98%);
-  --grn-color-shadeTone1: hsl(0 0% 100%);
-}
-
-: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"] {
+:root, [data-theme="light"], [data-theme="dark"] [data-theme="invert"] {
   --grn-color-fade10: var(--grn-color-blackFade10);
   --grn-color-fade9: var(--grn-color-blackFade9);
   --grn-color-fade8: var(--grn-color-blackFade8);
@@ -80,7 +29,7 @@
 
 /* dark */
 
-[data-theme="dark"] {
+[data-theme="dark"], [data-theme="light"] [data-theme="invert"] {
   --grn-color-fade10: var(--grn-color-whiteFade10);
   --grn-color-fade9: var(--grn-color-whiteFade9);
   --grn-color-fade8: var(--grn-color-whiteFade8);
@@ -106,3 +55,38 @@
   --grn-color-shade12: var(--grn-color-shadeTone2);
   --grn-color-shade13: var(--grn-color-shadeTone1);
 }
+
+/* light */
+
+:root, [data-theme="light"], [data-theme="dark"] [data-theme="invert"] {
+  --contentL: 0%;
+  --backgroundL: 100%;
+  --grn-color-floatingBackground: var(--grn-color-shade1);
+}
+
+/* dark */
+
+[data-theme="dark"], [data-theme="light"] [data-theme="invert"] {
+  --contentL: 100%;
+  --backgroundL: 0%;
+  --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-disabledContent: var(--grn-color-shade7);
+  --grn-color-icon: var(--grn-color-fade6);
+
+  --grn-color-background: var(--grn-color-shade1);
+  --grn-color-background2: var(--grn-color-shade2);
+  --grn-color-background3: var(--grn-color-shade3);
+  --grn-color-disabledBackground: var(--grn-color-shade4);
+
+  --grn-color-border: hsl(var(--HS) var(--contentL) / 10%);
+  --grn-color-border2: hsl(var(--HS) var(--contentL) / 16%);
+}
+

package/es/styles/shadows.css

@@ -0,0 +1,74 @@
+:root, [data-theme="light"], [data-theme="dark"] [data-theme="invert"] {
+  --alphaRatio: 0.75;
+}
+
+[data-theme="dark"], [data-theme="light"] [data-theme="invert"] {
+  --alphaRatio: 20;
+}
+
+:root, [data-theme] {
+  --c: 0 0% 0%;
+  --blurRatio: 1.8;
+  --yRatio: 1.05;
+  --spreadRatio: 1.1;
+  --ratioCurve: 0.47;
+
+  --rc1: var(--ratioCurve) * 1;
+  --rc2: var(--ratioCurve) * 2;
+  --rc3: var(--ratioCurve) * 3;
+  --rc4: var(--ratioCurve) * 4;
+  --rc5: var(--ratioCurve) * 5;
+  --rc6: var(--ratioCurve) * 6;
+
+  --b1: 1px;
+  --b2: calc(var(--b1) * var(--rc2) * var(--blurRatio));
+  --b3: calc(var(--b2) * var(--rc3) * var(--blurRatio));
+  --b4: calc(var(--b3) * var(--rc4) * var(--blurRatio));
+  --b5: calc(var(--b4) * var(--rc5) * var(--blurRatio));
+  --b6: calc(var(--b5) * var(--rc6) * var(--blurRatio));
+
+  --y1: 1px;
+  --y2: calc(var(--y1) * var(--rc2) * var(--yRatio));
+  --y3: calc(var(--y2) * var(--rc3) * var(--yRatio));
+  --y4: calc(var(--y3) * var(--rc4) * var(--yRatio));
+  --y5: calc(var(--y4) * var(--rc5) * var(--yRatio));
+  --y6: calc(var(--y5) * var(--rc6) * var(--yRatio));
+
+  --a1: 3%;
+  --a2: calc(var(--a1) * var(--rc2) * var(--alphaRatio));
+  --a3: calc(var(--a2) * var(--rc3) * var(--alphaRatio));
+  --a4: calc(var(--a3) * var(--rc4) * var(--alphaRatio));
+  --a5: calc(var(--a4) * var(--rc5) * var(--alphaRatio));
+  --a6: calc(var(--a5) * var(--rc6) * var(--alphaRatio));
+
+  --s1: -0.1px;
+  --s2: calc(var(--s1) * var(--rc2) * var(--spreadRatio));
+  --s3: calc(var(--s2) * var(--rc3) * var(--spreadRatio));
+  --s4: calc(var(--s3) * var(--rc4) * var(--spreadRatio));
+  --s5: calc(var(--s4) * var(--rc5) * var(--spreadRatio));
+  --s6: calc(var(--s5) * var(--rc6) * var(--spreadRatio));
+
+  --shadow1: 0 var(--y1) var(--b1) var(--s1) hsl(var(--c) / var(--a1));
+  --shadow2: 0 var(--y2) var(--b2) var(--s2) hsl(var(--c) / var(--a2));
+  --shadow3: 0 var(--y3) var(--b3) var(--s3) hsl(var(--c) / var(--a3));
+  --shadow4: 0 var(--y4) var(--b4) var(--s4) hsl(var(--c) / var(--a4));
+  --shadow5: 0 var(--y5) var(--b5) var(--s5) hsl(var(--c) / var(--a5));
+  --shadow6: 0 var(--y6) var(--b6) var(--s6) hsl(var(--c) / var(--a6));
+
+  --grn-shadow-s:
+    var(--shadow1),
+    var(--shadow2),
+    var(--shadow3),
+    var(--shadow4)
+  ;
+
+  --grn-shadow-m:
+    var(--grn-shadow-s),
+    var(--shadow5)
+  ;
+
+  --grn-shadow-l:
+    var(--grn-shadow-m),
+    var(--shadow6)
+  ;
+}

package/es/styles/variables.css

@@ -47,33 +47,6 @@
   --grn-transition-xxFast: 80ms;
 }
 
-/* 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(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(var(--HSL) / calc(4% * var(--sor)))
-  ;
-
-  --grn-shadow-l:
-    var(--grn-shadow-m),
-    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)))
-  ;
-}
-
 :root {
   --grn-space-betweenFormTitleAndContent: var(--grn-space-l);
   --grn-space-betweenFormContents: var(--grn-space-m);

package/es/utilities/responsive.js

@@ -62,8 +62,8 @@ export var getDimension = function getDimension(dimension) {
   if (isNumber(dimension)) return u(dimension);
 };
 export var getSpace = function getSpace(space) {
-  if (space in vars.utilSpaces) {
-    return getCssVar(varInfo.utilSpaces.name, space);
+  if (space in vars.spaceUtils) {
+    return getCssVar(varInfo.spaceUtils.name, space);
   }
 
   if (space in vars.spaces) {

package/es/variables/colors.js

@@ -71,14 +71,6 @@ export var colors = {
     yellow: 'yellow',
     green: 'green'
   },
-  internals: {
-    contentDisabled: 'contentDisabled',
-    backgroundDisabled: 'backgroundDisabled',
-    icon: 'icon',
-    iconInvert: 'iconInvert',
-    contentInvert: 'contentInvert',
-    floatingBackground: 'floatingBackground'
-  },
   generics: {
     warning: 'warning',
     danger: 'danger',
@@ -88,12 +80,16 @@ export var colors = {
   contents: {
     content: 'content',
     content2: 'content2',
-    content3: 'content3'
+    content3: 'content3',
+    disabledContent: 'disabledContent',
+    icon: 'icon'
   },
   backgrounds: {
     background: 'background',
     background2: 'background2',
-    background3: 'background3'
+    background3: 'background3',
+    disabledBackground: 'disabledBackground',
+    floatingBackground: 'floatingBackground'
   },
   borders: {
     border: 'border',

package/es/variables/vars.js

@@ -61,7 +61,7 @@ export var vars = {
     xxFast: 'xxFast'
   },
   colors: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colors.shadeTones), colors.shades), colors.fades), colors.blackFades), colors.whiteFades), colors.bases), colors.internals), colors.generics), colors.contents), colors.backgrounds), colors.borders),
-  utilSpaces: {
+  spaceUtils: {
     betweenFormTitleAndContent: 'betweenFormTitleAndContent',
     betweenFormContents: 'betweenFormContents',
     betweenFormContentAndActions: 'betweenFormContentAndActions',
@@ -101,8 +101,8 @@ export var varInfo = {
     name: 'colors',
     prefix: 'color'
   },
-  utilSpaces: {
-    name: 'utilSpaces',
+  spaceUtils: {
+    name: 'spaceUtils',
     prefix: 'space'
   }
 };

package/package.json

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

package/es/styles/colors/bases.css

@@ -1,13 +0,0 @@
-:root {
-  --white: hsl(0 0% 100%);
-  --HS: 0 0%;
-}
-
-:root {
-  --redHS: 6 66%;
-
-  --grn-color-blue: hsl(218 74% 54%);
-  --grn-color-red: hsl(var(--redHS) 65%);
-  --grn-color-yellow: hsl(44 99% 59%);
-  --grn-color-green: hsl(153 22% 57%);
-}

package/es/styles/colors/semantics.css

@@ -1,51 +0,0 @@
-: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);
-}
-
-/* light */
-
-:root, [data-theme="light"] {
-  --borderL: 0%;
-  --iconInvertL: 100%;
-  --iconInvertA: 70%;
-  --dangerButtonBackgroundHoverL: 68%;
-  --dangerButtonBackgroundActiveL: 70%;
-  --grn-color-floatingBackground: var(--grn-color-shade1);
-}
-
-/* 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-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-contentDisabled: var(--grn-color-shade7);
-  --grn-color-backgroundDisabled: var(--grn-color-shade4);
-
-  --grn-color-icon: var(--grn-color-fade6);
-  --grn-color-iconInvert: hsl(var(--HS) var(--iconInvertL) / var(--iconInvertA));
-
-  --grn-color-contentInvert: var(--grn-color-shade2);
-}