imbric-theme 0.1.0

package/tokens/Token/components/__snapshots__/FontFamily.stories.js.snap

@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Tokens/FontFamily Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="container"
+  >
+    <div
+      className="font-family"
+      style={
+        Object {
+          "fontFamily": Array [
+            "Exo",
+            "Arial",
+            "sans-serif",
+          ],
+        }
+      }
+    >
+      Depend noticed bones Edge disturbing flesh heard cream. Morninged facial judgment Hobbit fortress. Camp flatten buy dagger Sit. Leagues sweeter 1400 mean friend unlost Déagol trade stuffing? Smithy's jiffy merely treacherous cozy interesting ask seat Thror's.
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-family-sans)
+      </span>
+      <span
+        className="label"
+      >
+        Exo, Arial, sans-serif
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Tokens/FontFamily Types 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="container"
+  >
+    <div
+      className="font-family"
+      style={
+        Object {
+          "fontFamily": Array [
+            "Exo",
+            "Arial",
+            "sans-serif",
+          ],
+        }
+      }
+    >
+      Depend noticed bones Edge disturbing flesh heard cream. Morninged facial judgment Hobbit fortress. Camp flatten buy dagger Sit. Leagues sweeter 1400 mean friend unlost Déagol trade stuffing? Smithy's jiffy merely treacherous cozy interesting ask seat Thror's.
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-family-sans)
+      </span>
+      <span
+        className="label"
+      >
+        Exo, Arial, sans-serif
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-family"
+      style={
+        Object {
+          "fontFamily": Array [
+            "'Roboto Mono'",
+            "'Courier New'",
+            "monospace",
+          ],
+        }
+      }
+    >
+      Depend noticed bones Edge disturbing flesh heard cream. Morninged facial judgment Hobbit fortress. Camp flatten buy dagger Sit. Leagues sweeter 1400 mean friend unlost Déagol trade stuffing? Smithy's jiffy merely treacherous cozy interesting ask seat Thror's.
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-family-mono)
+      </span>
+      <span
+        className="label"
+      >
+        'Roboto Mono', 'Courier New', monospace
+      </span>
+    </div>
+  </div>
+</div>
+`;

package/tokens/Token/components/__snapshots__/FontSize.stories.js.snap

@@ -0,0 +1,261 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Tokens/FontSize Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="container"
+  >
+    <div
+      className="font-size"
+      style={
+        Object {
+          "fontSize": "14px",
+        }
+      }
+    >
+      Woodland lasted crowned holiday pirate brother wrath.
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-size-base)
+      </span>
+      <span
+        className="label"
+      >
+        14px
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Tokens/FontSize Sizes 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="container"
+  >
+    <div
+      className="font-size"
+      style={
+        Object {
+          "fontSize": "14px",
+        }
+      }
+    >
+      Woodland lasted crowned holiday pirate brother wrath.
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-size-base)
+      </span>
+      <span
+        className="label"
+      >
+        14px
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-size"
+      style={
+        Object {
+          "fontSize": "1.2rem",
+        }
+      }
+    >
+      Woodland lasted crowned holiday pirate brother wrath.
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-size-xs)
+      </span>
+      <span
+        className="label"
+      >
+        1.2rem
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-size"
+      style={
+        Object {
+          "fontSize": "1.4rem",
+        }
+      }
+    >
+      Woodland lasted crowned holiday pirate brother wrath.
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-size-sm)
+      </span>
+      <span
+        className="label"
+      >
+        1.4rem
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-size"
+      style={
+        Object {
+          "fontSize": "1.6rem",
+        }
+      }
+    >
+      Woodland lasted crowned holiday pirate brother wrath.
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-size-md)
+      </span>
+      <span
+        className="label"
+      >
+        1.6rem
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-size"
+      style={
+        Object {
+          "fontSize": "1.8rem",
+        }
+      }
+    >
+      Woodland lasted crowned holiday pirate brother wrath.
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-size-lg)
+      </span>
+      <span
+        className="label"
+      >
+        1.8rem
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-size"
+      style={
+        Object {
+          "fontSize": "2.2rem",
+        }
+      }
+    >
+      Woodland lasted crowned holiday pirate brother wrath.
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-size-xl)
+      </span>
+      <span
+        className="label"
+      >
+        2.2rem
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-size"
+      style={
+        Object {
+          "fontSize": "6rem",
+        }
+      }
+    >
+      Woodland lasted crowned holiday pirate brother wrath.
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-size-2xl)
+      </span>
+      <span
+        className="label"
+      >
+        6rem
+      </span>
+    </div>
+  </div>
+</div>
+`;

package/tokens/Token/components/__snapshots__/FontWeight.stories.js.snap

@@ -0,0 +1,317 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Tokens/FontWeight Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="container"
+  >
+    <div
+      className="font-weight"
+      style={
+        Object {
+          "fontWeight": 400,
+        }
+      }
+    >
+      Cheap doors deny rune Mithrandir spawning brown dishes?
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-weight-normal)
+      </span>
+      <span
+        className="label"
+      >
+        400
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Tokens/FontWeight Sizes 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="container"
+  >
+    <div
+      className="font-weight"
+      style={
+        Object {
+          "fontWeight": 100,
+        }
+      }
+    >
+      Cheap doors deny rune Mithrandir spawning brown dishes?
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-weight-hairline)
+      </span>
+      <span
+        className="label"
+      >
+        100
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-weight"
+      style={
+        Object {
+          "fontWeight": 200,
+        }
+      }
+    >
+      Cheap doors deny rune Mithrandir spawning brown dishes?
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-weight-thin)
+      </span>
+      <span
+        className="label"
+      >
+        200
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-weight"
+      style={
+        Object {
+          "fontWeight": 300,
+        }
+      }
+    >
+      Cheap doors deny rune Mithrandir spawning brown dishes?
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-weight-light)
+      </span>
+      <span
+        className="label"
+      >
+        300
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-weight"
+      style={
+        Object {
+          "fontWeight": 400,
+        }
+      }
+    >
+      Cheap doors deny rune Mithrandir spawning brown dishes?
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-weight-normal)
+      </span>
+      <span
+        className="label"
+      >
+        400
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-weight"
+      style={
+        Object {
+          "fontWeight": 500,
+        }
+      }
+    >
+      Cheap doors deny rune Mithrandir spawning brown dishes?
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-weight-medium)
+      </span>
+      <span
+        className="label"
+      >
+        500
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-weight"
+      style={
+        Object {
+          "fontWeight": 600,
+        }
+      }
+    >
+      Cheap doors deny rune Mithrandir spawning brown dishes?
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-weight-semibold)
+      </span>
+      <span
+        className="label"
+      >
+        600
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-weight"
+      style={
+        Object {
+          "fontWeight": 700,
+        }
+      }
+    >
+      Cheap doors deny rune Mithrandir spawning brown dishes?
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-weight-bold)
+      </span>
+      <span
+        className="label"
+      >
+        700
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-weight"
+      style={
+        Object {
+          "fontWeight": 800,
+        }
+      }
+    >
+      Cheap doors deny rune Mithrandir spawning brown dishes?
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-weight-extrabold)
+      </span>
+      <span
+        className="label"
+      >
+        800
+      </span>
+    </div>
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="font-weight"
+      style={
+        Object {
+          "fontWeight": 900,
+        }
+      }
+    >
+      Cheap doors deny rune Mithrandir spawning brown dishes?
+    </div>
+    <div
+      className="description"
+    >
+      <span
+        className="label"
+      >
+        var(--font-weight-black)
+      </span>
+      <span
+        className="label"
+      >
+        900
+      </span>
+    </div>
+  </div>
+</div>
+`;