More colors, no context etc

eldh · Nov 3, 2019 · d1723dd · d1723dd
1 parent df6040f
commit d1723dd
Show file tree

Hide file tree

Showing 19 changed files with 205 additions and 207 deletions.
diff --git a/demo/src/App.re b/demo/src/App.re
@@ -5,6 +5,10 @@ let getTheme =
   fun
   | Dark => DarkTheme.theme
   | Light => Core.DefaultTheme.theme;
+let getThemeKey =
+  fun
+  | Dark => "0"
+  | Light => "1";
 
 let darkMode =
   Core.Styles.matchMedia("(prefers-color-scheme: dark)")##matches;
@@ -35,13 +39,10 @@ let make = () => {
     ],
   );
 
-  <>
+  <React.Fragment key={themeVariant |> getThemeKey}>
     <Topbar toggleTheme />
-    <Box
-      key={themeVariant->Obj.magic}
-      alignContent=`center
-      margin={`margin(`auto)}>
+    <Box alignContent=`center margin={`margin(`auto)}>
       <Test toggleTheme />
     </Box>
-  </>;
+  </React.Fragment>;
 };
diff --git a/demo/src/ColorTest.re b/demo/src/ColorTest.re
@@ -26,26 +26,33 @@ module ColorBox = {
             let c =
               Lab.lightness(
                 n * 10 |> float_of_int,
-                color |> Core.Styles.useLabColor,
+                color |> Core.Styles.getLabColor,
               );
             <Swatch color=c key={n |> string_of_int} />;
           })
        |> React.array}
     </Box>;
   };
 };
-module GradientBox = {
+module MixColorBox = {
+  let white = `lab((100., 0., 0., 1.));
+  let black = `lab((0., 0., 0., 1.));
   [@react.component]
-  let make = (~toColor, ~fromColor, ()) => {
+  let make = (~color, ~title) => {
+    let middleC = color |> Core.Styles.getLabColor |> Lab.lightness(50.);
     <Box margin={`margin4((`noSpace, `noSpace, `double, `double))} grow=0.>
-      <Text.String size=(-1)> "Lab" </Text.String>
+      <Text.String size=(-1)> title </Text.String>
       {[|0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10|]
        |> Array.map(n => {
             let c =
-              Lab.mix(
-                (n |> float_of_int) /. 10.,
-                fromColor |> Core.Styles.useLabColor,
-                toColor |> Core.Styles.useLabColor,
+              n > 5 ?  Lab.mix(
+                (n - 6 |> float_of_int) /. 8.,
+                middleC,
+                white,
+              ) : Lab.mix(
+                (n |> float_of_int) /. 7.,
+                black,
+                middleC,
               );
 
             <Swatch color=c key={n |> string_of_int} />;
@@ -55,28 +62,6 @@ module GradientBox = {
   };
 };
 
-module RgbGradientBox = {
-  [@react.component]
-  let make = (~toColor, ~fromColor, ()) => {
-    <Box margin={`margin4((`noSpace, `noSpace, `double, `double))} grow=0.>
-      <Text.String size=(-1)> "Rgb" </Text.String>
-      {[|0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10|]
-       |> Array.map(n => {
-            let c =
-              Lab.(
-                mix(
-                  (n |> float_of_int) /. 10.,
-                  fromColor |> Core.Styles.useLabColor,
-                  toColor |> Core.Styles.useLabColor,
-                )
-              );
-            <Swatch color=c key={n |> string_of_int} />;
-          })
-       |> React.array}
-    </Box>;
-  };
-};
-
 [@react.component]
 let make = () => {
   Lab.(
@@ -90,6 +75,15 @@ let make = () => {
         <ColorBox color=`error title="Error" />
         <ColorBox color=`warning title="Warning" />
       </Box>
+      <Box direction=`row align=`flexEnd wrap=`wrap width=`full>
+        <MixColorBox color=`primary title="Primary" />
+        <MixColorBox color=`secondary title="Secondary" />
+        <MixColorBox color=`brand1 title="Brand1" />
+        <MixColorBox color=`brand2 title="Brand2" />
+        <MixColorBox color=`success title="Success" />
+        <MixColorBox color=`error title="Error" />
+        <MixColorBox color=`warning title="Warning" />
+      </Box>
     </ComponentsCard>
   );
 };
diff --git a/demo/src/Topbar.re b/demo/src/Topbar.re
@@ -5,7 +5,7 @@ open UI;
 let make = (~toggleTheme=ignore, ()) => {
   <View>
     <>
-      <Box height={Styles.useSpace(`number(11))} />
+      <Box height={Styles.getSpace(`number(11))} />
       <Box
         backgroundColor={`highlight((8, `body))}
         padding={`padding(`single)}

diff --git a/revy/package.json b/revy/package.json
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@glennsl/bs-jest": "^0.4.9",
-    "bs-platform": "^5.0.6",
+    "bs-platform": "^6.2.1",
     "reason-react": "^0.7.0"
   },
   "author": "andreas.eldh@gmail.com",

diff --git a/revy/public/index.html b/revy/public/index.html
@@ -3,10 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is added to the
@@ -27,15 +24,5 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/revy/src/Box.re b/revy/src/Box.re
@@ -1,4 +1,4 @@
-let useBoxStyle =
+let getBoxStyle =
     (
       ~position as position_,
       ~align as align_,
@@ -19,14 +19,14 @@ let useBoxStyle =
       ~borderRadius as borderRadius_,
       (),
     ) => {
-  let widthStyles = Core.Styles.useWidth(width_);
+  let widthStyles = Core.Styles.getWidth(width_);
 
   [
     Css.[
       position(position_),
       alignSelf(alignSelf_),
       alignItems(align_),
-      backgroundColor(Core.Styles.useColor(backgroundColor_)),
+      backgroundColor(Core.Styles.getColor(backgroundColor_)),
       alignContent(alignContent_),
       height(height_),
       overflow(overflow_),
@@ -38,8 +38,8 @@ let useBoxStyle =
       flexWrap(wrap_),
       justifyContent(justify_),
     ],
-    Core.Styles.useMargin(margin_),
-    Core.Styles.usePadding(padding_),
+    Core.Styles.getMargin(margin_),
+    Core.Styles.getPadding(padding_),
     widthStyles,
   ]
   |> List.concat;
@@ -76,7 +76,7 @@ let make =
     ) => {
   let style =
     [
-      useBoxStyle(
+      getBoxStyle(
         ~position,
         ~align,
         ~alignSelf,

diff --git a/revy/src/Button.re b/revy/src/Button.re
@@ -24,13 +24,13 @@ let useButtonStyles =
   // TODO fix
   let (btnFontSize, paddingV, paddingH) =
     switch (size) {
-    | Small => (Styles.useFontSize(-1), `half, `single)
-    | Medium => (Styles.useFontSize(0), `single, `double)
-    | Large => (Styles.useFontSize(1), `double, `triple)
+    | Small => (Styles.getFontSize(-1), `half, `single)
+    | Medium => (Styles.getFontSize(0), `single, `double)
+    | Large => (Styles.getFontSize(1), `double, `triple)
     };
   let sharedStyles =
     Css.[
-      padding2(~v=Styles.useSpace(paddingV), ~h=Styles.useSpace(paddingH)),
+      padding2(~v=Styles.getSpace(paddingV), ~h=Styles.getSpace(paddingH)),
       textAlign(`center),
       alignContent(`center),
       position(`relative),
@@ -39,12 +39,12 @@ let useButtonStyles =
       cursor(`pointer),
       transition(~duration=200, "all"),
       fontSize(btnFontSize),
-      lineHeight(Styles.useLineHeight(~fontSize=btnFontSize, ())),
+      lineHeight(Styles.getLineHeight(~fontSize=btnFontSize, ())),
       fontWeight(`bold),
     ];
   let variantStyles = v => {
     open Css;
-    let isLight = Styles.useIsLight();
+    let isLight = Styles.getIsLight();
 
     let bgVariant =
       switch (v) {
@@ -61,54 +61,54 @@ let useButtonStyles =
             ~inset=true,
             ~spread=px(2),
             ~blur=px(0),
-            Styles.useTextColor(~tint=bgVariant, ~highlight=-30, ()),
+            Styles.getTextColor(~tint=bgVariant, ~highlight=-30, ()),
           )
         : boxShadow(
             ~y=px(0),
             ~inset=true,
             ~spread=px(1),
             ~blur=px(0),
-            Styles.useColor(~highlight=5, bgVariant),
+            Styles.getColor(~highlight=5, bgVariant),
           ),
       borderWidth(px(0)),
       borderStyle(`solid),
     ];
     let outlineHighlightBg = isLight ? rgba(0, 0, 0) : rgba(255, 255, 255);
 
     [
-      fontFamily(Styles.useFontFamily(`body)),
+      fontFamily(Styles.getFontFamily(`body)),
       color(
         outline_
-          ? Styles.useTextColor(~tint=bgVariant, ~highlight=-30, ())
-          : Styles.useTextColor(~background=bgVariant, ~highlight=10, ()),
+          ? Styles.getTextColor(~tint=bgVariant, ~highlight=-30, ())
+          : Styles.getTextColor(~background=bgVariant, ~highlight=10, ()),
       ),
-      borderRadius(Styles.useBorderRadius(`medium)),
+      borderRadius(Styles.getBorderRadius(`medium)),
       textTransform(`uppercase),
-      backgroundColor(Styles.useColor(outline_ ? `transparent : bgVariant)),
+      backgroundColor(Styles.getColor(outline_ ? `transparent : bgVariant)),
       hover([
         backgroundColor(
           outline_
             ? outlineHighlightBg(0.05)
-            : Styles.useColor(~highlight=isLight ? (8) : 10, bgVariant),
+            : Styles.getColor(~highlight=isLight ? (8) : 10, bgVariant),
         ),
       ]),
       disabled([
         opacity(0.7),
-        hover([backgroundColor(Styles.useColor(bgVariant))]),
+        hover([backgroundColor(Styles.getColor(bgVariant))]),
       ]),
       focus([outlineStyle(`none)]),
       selector(":focus:not(:active)", Animations.focus),
       active([
         backgroundColor(
           outline_
             ? outlineHighlightBg(0.15)
-            : Styles.useColor(~highlight=5, bgVariant),
+            : Styles.getColor(~highlight=5, bgVariant),
         ),
       ]),
       ...styleStyles,
     ];
   };
-  [Styles.useMargin(margin_), sharedStyles, variantStyles(variant)]
+  [Styles.getMargin(margin_), sharedStyles, variantStyles(variant)]
   |> List.concat;
 };
 
@@ -207,8 +207,8 @@ module Round = {
         [
           btnStyle,
           Css.[
-            width(Styles.useSpace(w)),
-            height(Styles.useSpace(w)),
+            width(Styles.getSpace(w)),
+            height(Styles.getSpace(w)),
             padding(px(0)),
             borderRadius(pct(50.)),
           ],

diff --git a/revy/src/Card.re b/revy/src/Card.re
@@ -1,30 +1,26 @@
 open Core;
 
 let useCardStyle = (~padding as p=?, ~margin as m=?, ()) => {
-  // let alpha = Styles.useIsLight() ? 0.05 : 0.2;
+  // let alpha = Styles.getIsLight() ? 0.05 : 0.2;
   [
     Css.[
-      backgroundColor(
-        Styles.(
-          useColor(useIsLight() ? `highlight((4, `body)) : `highlight((4, `body)))
-        ),
-      ),
+      backgroundColor(Styles.getColor(`bodyUp1)),
       flexWrap(`wrap),
       flexDirection(`column),
       alignItems(`stretch),
       borderRadius(Css.px(12)),
       // borderWidth(px(1)),
-      // borderColor(Styles.useColor(`highlight((8, `body)))),
+      // borderColor(Styles.getColor(`highlight((8, `body)))),
       // borderStyle(`solid),
       unsafe("willChange", "transition"),
-      // boxShadows([
-      //   `shadow("0 0px 4px " ++ string_of_rgba(0, 0, 0, alpha)),
-      //   `shadow("0 5px 12px " ++ string_of_rgba(0, 0, 0, alpha)),
-      //   `shadow("0 10px 16px " ++ string_of_rgba(0, 0, 0, alpha)),
-      // ]),
     ],
-    Styles.usePadding(p),
-    Styles.useMargin(m),
+    // boxShadows([
+    //   `shadow("0 0px 4px " ++ string_of_rgba(0, 0, 0, alpha)),
+    //   `shadow("0 5px 12px " ++ string_of_rgba(0, 0, 0, alpha)),
+    //   `shadow("0 10px 16px " ++ string_of_rgba(0, 0, 0, alpha)),
+    // ]),
+    Styles.getPadding(p),
+    Styles.getMargin(m),
   ]
   |> List.concat;
 };