@sps-woodland/tokens 7.0.0

package/src/types.ts

@@ -0,0 +1,6 @@
+import type { sprinkleValues } from "./vanilla-extract/sprinkleValues";
+import type { Tokens } from "./tokens";
+
+export type Color = keyof typeof sprinkleValues.colors;
+export type IconName = keyof typeof Tokens.icon;
+export type IconSize = keyof typeof Tokens.size.icon;

package/src/utils/pxToRem.ts

@@ -0,0 +1,7 @@
+/**
+ * Takes in a CSS pixel value (e.g. "25px")
+ * and returns its rem value ("1.5625rem")
+ */
+export function pxToRem(px: string): string {
+  return `${Number(px.replace("px", "")) / 16}rem`;
+}

package/src/utils/rem.ts

@@ -0,0 +1,27 @@
+import type { StyleRule } from "@vanilla-extract/css";
+
+import { pxToRem } from "./pxToRem";
+
+/**
+ * Recursively navigates a vanilla-extract StyleRule and applies
+ * pxToRem on every pixel value in every string property value
+ * it can find.
+ */
+export function rem<T extends StyleRule>(styleRule: T): T {
+  return Object.keys(styleRule)
+    .reduce((acc, key) => {
+      switch (typeof styleRule[key]) {
+        case "object":
+          acc[key] = rem(styleRule[key]);
+          break;
+
+        case "string":
+          acc[key] = styleRule[key].replace(/[\d.]+px/g, pxToRem);
+          break;
+
+        default:
+          acc[key] = styleRule[key];
+      }
+      return acc;
+    }, {} as T);
+}

package/src/utils/transparentEquivalentColor.ts

@@ -0,0 +1,42 @@
+import tinycolor from "tinycolor2";
+
+interface RGBColor {
+  r: number;
+  g: number;
+  b: number;
+  a?: number;
+}
+
+interface HSLColor {
+  h: number;
+  s: number;
+  l: number;
+}
+
+interface HSVColor {
+  h: number;
+  s: number;
+  v: number;
+}
+
+/**
+ * Takes in a color value (see https://www.npmjs.com/package/tinycolor2
+ * for accepted input formats) and returns a new color in rgb format
+ * that is 30% transparent, but results in the same perceived color
+ * as the input when layered on a white background. This is used so that
+ * when you place an element in a container that uses linear-gradient
+ * background images to create shadows indicating that the container
+ * can be scrolled to reveal more content, those elements can appear
+ * as though they are under the shadows even though they are, in fact,
+ * on top of them.
+ */
+export function transparentEquivalentColor(color: string | RGBColor | HSLColor | HSVColor): string {
+  const { r, g, b } = tinycolor(color).toRgb();
+  const newRGB = [
+    r,
+    g,
+    b,
+  ].map((c: number): number => Math.round((c - 255 + (255 * 0.3)) / 0.3))
+    .join(", ");
+  return `rgb(${newRGB}, 0.3)`;
+}

package/src/vanilla-extract/border.css.ts

@@ -0,0 +1,46 @@
+import { recipe } from "@vanilla-extract/recipes";
+
+import { sprinkleValues } from "./sprinkleValues";
+import type { Sprinkles } from "./sprinkles.css";
+import { sprinkles } from "./sprinkles.css";
+
+type Colors = typeof sprinkleValues.colors;
+
+const color: Colors = Object.keys(sprinkleValues.colors)
+  .reduce((acc, key) => {
+    acc[key] = sprinkles({
+      borderColor: key as Sprinkles["borderColor"],
+    });
+    return acc;
+  }, {} as Colors);
+
+type Radii = typeof sprinkleValues.border.radius;
+
+const radius: Radii = Object.keys(sprinkleValues.border.radius)
+  .reduce((acc, key) => {
+    acc[key] = sprinkles({
+      borderRadius: key as Sprinkles["borderRadius"],
+    });
+    return acc;
+  }, {} as Radii);
+
+export const border = recipe({
+  base: [
+    sprinkles({
+      borderWidth: "standard",
+    }),
+    {
+      borderStyle: "solid",
+    },
+  ],
+
+  variants: {
+    color,
+    radius,
+  },
+
+  defaultVariants: {
+    color: "grey-medium-light",
+    radius: "none",
+  },
+});

package/src/vanilla-extract/grid.css.ts

@@ -0,0 +1,49 @@
+import { style } from "@vanilla-extract/css";
+
+import { dictionary } from "../dictionary";
+
+/*
+ * usage:
+ * <div className={grid.root}>
+ *   <div className={grid[12]}></div>
+ *   <div className={grid[3]}</div>
+ *   <div className={grid[9]}</div>
+ * </div>
+ *
+ * this example will result in two "rows"
+ * the grid is 12 wide, so the first child will
+ * obviously span all the way across, then
+ * the 3 and 9 will go on one "row" together
+ *
+ * but when we add responsive conditions to the
+ * grid code, we could have the elements in these
+ * examples flow/wrap differently since they're
+ * siblings. CSS grid will give us flexibility we
+ * don't currently have
+ */
+export const grid = {
+  root: style({
+    display: "grid",
+    gap: dictionary.tokens.size.grid.gutter.value,
+    gridTemplateColumns: dictionary.tokens.grid.columns.standard.attributes.cssValue,
+  }),
+
+  /*
+   * manually enumerating these rather than using a loop of some kind
+   * allows for the TypeScript typing to be inferred; otherwise the
+   * type would have to be written out separately and manually enumerate
+   * these properties anyway
+   */
+  1: style({ gridColumn: "span 1" }),
+  2: style({ gridColumn: "span 2" }),
+  3: style({ gridColumn: "span 3" }),
+  4: style({ gridColumn: "span 4" }),
+  5: style({ gridColumn: "span 5" }),
+  6: style({ gridColumn: "span 6" }),
+  7: style({ gridColumn: "span 7" }),
+  8: style({ gridColumn: "span 8" }),
+  9: style({ gridColumn: "span 9" }),
+  10: style({ gridColumn: "span 10" }),
+  11: style({ gridColumn: "span 11" }),
+  12: style({ gridColumn: "span 12" }),
+};

package/src/vanilla-extract/properties/border.css.ts

@@ -0,0 +1,33 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+
+import { sprinkleValues } from "../sprinkleValues";
+import { conditions } from "./conditions";
+
+export const borderProperties = defineProperties({
+  conditions: {
+    default: {},
+    ...conditions.interaction,
+  },
+  defaultCondition: "default",
+  properties: {
+    borderColor: sprinkleValues.colors,
+    borderBottomColor: sprinkleValues.colors,
+    borderLeftColor: sprinkleValues.colors,
+    borderRightColor: sprinkleValues.colors,
+    borderTopColor: sprinkleValues.colors,
+    borderRadius: sprinkleValues.border.radius,
+    borderWidth: sprinkleValues.border.width,
+    borderTopWidth: sprinkleValues.border.width,
+    borderRightWidth: sprinkleValues.border.width,
+    borderBottomWidth: sprinkleValues.border.width,
+    borderLeftWidth: sprinkleValues.border.width,
+    borderTopLeftRadius: sprinkleValues.border.radius,
+    borderTopRightRadius: sprinkleValues.border.radius,
+    borderBottomRightRadius: sprinkleValues.border.radius,
+    borderBottomLeftRadius: sprinkleValues.border.radius,
+  },
+  shorthands: {
+    borderTopRadius: ["borderTopLeftRadius", "borderTopRightRadius"],
+    borderBottomRadius: ["borderBottomLeftRadius", "borderBottomRightRadius"],
+  },
+});

package/src/vanilla-extract/properties/color.css.ts

@@ -0,0 +1,16 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+
+import { sprinkleValues } from "../sprinkleValues";
+import { conditions } from "./conditions";
+
+export const colorProperties = defineProperties({
+  conditions: {
+    default: {},
+    ...conditions.interaction,
+  },
+  defaultCondition: "default",
+  properties: {
+    backgroundColor: sprinkleValues.colors,
+    color: sprinkleValues.colors,
+  },
+});

package/src/vanilla-extract/properties/conditions.ts

@@ -0,0 +1,14 @@
+export const conditions = {
+  childPosition: {
+    firstChild: { selector: "&:first-child" },
+    notFirstChild: { selector: "&:not(:first-child)" },
+    lastChild: { selector: "&:last-child" },
+    notLastChild: { selector: "&:not(:last-child)" },
+    middleChild: { selector: "&:not(:first-child):not(:last-child)" },
+  },
+
+  interaction: {
+    hover: { selector: "&:hover" },
+    focus: { selector: "&:focus" },
+  },
+};

package/src/vanilla-extract/properties/grid.css.ts

@@ -0,0 +1,13 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+
+import { sprinkleValues } from "../sprinkleValues";
+
+export const gridProperties = defineProperties({
+  properties: {
+    columnGap: sprinkleValues.spacing,
+    rowGap: sprinkleValues.spacing,
+  },
+  shorthands: {
+    gap: ["rowGap", "columnGap"],
+  },
+});

package/src/vanilla-extract/properties/margin.css.ts

@@ -0,0 +1,40 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+
+import { sprinkleValues } from "../sprinkleValues";
+import { conditions } from "./conditions";
+
+export const marginProperties = defineProperties({
+  conditions: {
+    default: {},
+    ...conditions.childPosition,
+  },
+  defaultCondition: "default",
+  properties: {
+    marginBottom: sprinkleValues.spacing,
+    marginLeft: sprinkleValues.spacing,
+    marginRight: sprinkleValues.spacing,
+    marginTop: sprinkleValues.spacing,
+  },
+  shorthands: {
+    margin: [
+      "marginTop",
+      "marginBottom",
+      "marginLeft",
+      "marginRight",
+    ],
+    marginX: ["marginLeft", "marginRight"],
+    marginY: ["marginTop", "marginBottom"],
+    m: [
+      "marginTop",
+      "marginBottom",
+      "marginLeft",
+      "marginRight",
+    ],
+    mx: ["marginLeft", "marginRight"],
+    my: ["marginTop", "marginBottom"],
+    mt: ["marginTop"],
+    mr: ["marginRight"],
+    mb: ["marginBottom"],
+    ml: ["marginLeft"],
+  },
+});

package/src/vanilla-extract/properties/padding.css.ts

@@ -0,0 +1,40 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+
+import { sprinkleValues } from "../sprinkleValues";
+import { conditions } from "./conditions";
+
+export const paddingProperties = defineProperties({
+  conditions: {
+    default: {},
+    ...conditions.childPosition,
+  },
+  defaultCondition: "default",
+  properties: {
+    paddingBottom: sprinkleValues.spacing,
+    paddingLeft: sprinkleValues.spacing,
+    paddingRight: sprinkleValues.spacing,
+    paddingTop: sprinkleValues.spacing,
+  },
+  shorthands: {
+    padding: [
+      "paddingTop",
+      "paddingBottom",
+      "paddingLeft",
+      "paddingRight",
+    ],
+    paddingX: ["paddingLeft", "paddingRight"],
+    paddingY: ["paddingTop", "paddingBottom"],
+    p: [
+      "paddingTop",
+      "paddingBottom",
+      "paddingLeft",
+      "paddingRight",
+    ],
+    px: ["paddingLeft", "paddingRight"],
+    py: ["paddingTop", "paddingBottom"],
+    pt: ["paddingTop"],
+    pr: ["paddingRight"],
+    pb: ["paddingBottom"],
+    pl: ["paddingLeft"],
+  },
+});

package/src/vanilla-extract/properties/type.css.ts

@@ -0,0 +1,17 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+
+import { sprinkleValues } from "../sprinkleValues";
+
+export const typeProperties = defineProperties({
+  properties: {
+    fontSize: sprinkleValues.fontSizes,
+    fontWeight: sprinkleValues.type.weight,
+    lineHeight: sprinkleValues.lineHeights,
+  },
+  shorthands: {
+    fs: ["fontSize"],
+    fw: ["fontWeight"],
+    lh: ["lineHeight"],
+    type: ["fontSize", "lineHeight"],
+  },
+});