@pnx-mixtape/mxds 0.0.23 → 0.0.24

package/src/constants.css

@@ -7,122 +7,123 @@
 @property --scheme {
   syntax: "light | dark";
   inherits: true;
-  initial-value: token("colour.scheme");
+  initial-value: token("colour.main.scheme");
 }
 
-:root {
-  --_hue-primary: token("colour.primary");
-  --_hue-accent: token("colour.accent");
-  --_hue-info: token("colour.info");
-  --_hue-error: token("colour.error");
-  --_hue-warning: token("colour.warning");
-  --_hue-success: token("colour.success");
-  --_hue-outline: token("utility.outline.hue");
-
-  /* Brand colors */
-  --colour-primary: oklch(50% 0.3 var(--_hue-primary));
-  --colour-primary-light: color-mix(in oklch, var(--colour-primary), white 90%);
-  --colour-accent: oklch(50% 0.3 var(--_hue-accent));
-  --colour-accent-light: color-mix(in oklch, var(--colour-accent), white 90%);
-
-  /* System colours */
-  --color-scheme: token("colour.scheme");
-
-  color-scheme: var(--color-scheme);
-
-  --colour-background: light-dark(token("colour.main.bg"), token("colour.reverse.bg"));
-  --colour-background-alt: light-dark(token("colour.main.bgAlt"), token("colour.reverse.bgAlt"));
-  --colour-foreground: light-dark(token("colour.main.fg"), token("colour.reverse.fg"));
-  --colour-foreground-alt: light-dark(token("colour.main.fgAlt"), token("colour.reverse.fgAlt"));
-  --colour-border: light-dark(token("colour.main.border"), token("colour.reverse.border"));
-  --colour-link: light-dark(var(--colour-primary), var(--colour-primary-light));
-
-  /* Reverse colors */
-  --colour-foreground-reverse: light-dark(token("colour.reverse.fg"), token("colour.main.fg"));
-  --colour-background-reverse: light-dark(token("colour.reverse.bg"), token("colour.main.bg"));
-
-  /* State colours */
-  --colour-error: oklch(45% 0.3 var(--_hue-error));
-  --colour-success: oklch(50% 0.3 var(--_hue-success));
-  --colour-warning: oklch(55% 0.3 var(--_hue-warning));
-  --colour-info: oklch(50% 0.3 var(--_hue-info));
-
-  /* Typography */
-  --font-family: token("font.family");
-  --type-ratio: token("font.size.ratio");
-  --type-ratio-small: token("font.size.ratioSmall");
-  --base-font-size: max(1rem, token("font.size.basePx"));
-  --font-size: var(--base-font-size);
-  --font-size-s: calc(var(--base-font-size) / var(--type-ratio-small));
-  --font-size-xs: calc(var(--font-size-s) / var(--type-ratio-small));
-  --font-size-sm: calc(var(--base-font-size) * var(--type-ratio-small));
-  --font-size-m: calc(var(--base-font-size) * var(--type-ratio));
-  --font-size-l: calc(var(--font-size-m) * var(--type-ratio));
-  --font-size-xl: calc(var(--font-size-l) * var(--type-ratio));
-  --font-size-xxl: calc(var(--font-size-xl) * var(--type-ratio));
-  --font-size-xxxl: calc(var(--font-size-xxl) * var(--type-ratio));
-  --font-size-diff: token("font.size.diff");
-
-  --line-height: token("font.lineHeight.main");
-  --line-height-h: token("font.lineHeight.heading");
-  --line-height-ui: token("font.lineHeight.ui");
-
-  --font-weight-normal: token("font.weight.main");
-  --font-weight-bold: token("font.weight.bold");
-
-  /* Spacing */
-  --spacing-xxxxs: token("size.spacing.xxxxs");
-  --spacing-xxxs: token("size.spacing.xxxs");
-  --spacing-xxs: token("size.spacing.xxs");
-  --spacing-xs: token("size.spacing.xs");
-  --spacing-s: token("size.spacing.s");
-  --spacing-m: token("size.spacing.m");
-  --spacing-l: token("size.spacing.l");
-  --spacing-xl: token("size.spacing.xl");
-  --spacing-xxl: token("size.spacing.xxl");
-  --spacing-xxxl: token("size.spacing.xxxl");
-  --spacing-xxxxl: token("size.spacing.xxxl");
-  --spacing-ul: token("size.spacing.ul");
-  --spacing-uul: token("size.spacing.uul");
-  --spacing-uuul: token("size.spacing.uuul");
-
-  --outline-width: token("utility.outline.width");
-  --outline-style: token("utility.outline.style");
-  --_colour-outline: oklch(50% 0.3 var(--_hue-outline));
-  --outline-color: light-dark(
-    var(--_colour-outline),
-    color-mix(in oklch, var(--_colour-outline), white 90%)
-  );
-
-  /* Layout */
-  --container-max-width-narrow: token("size.container.narrow");
-  --container-max-width: token("size.container.aligned");
-  --gutter-min: token("size.container.gutterMin");
-  --gutter-max: token("size.container.gutterMax");
-  --gap-s: token("size.gap.s");
-  --gap: token("size.gap.m");
-  --gap-l: token("size.gap.l");
-  --gap-xl: token("size.gap.xl");
-  --breakpoint-xs: token("breakpoint.xs");
-  --breakpoint-s: token("breakpoint.s");
-  --breakpoint-m: token("breakpoint.m");
-  --breakpoint-l: token("breakpoint.l");
-  --breakpoint-xl: token("breakpoint.xl");
-
-  /* Utility */
-  --shadow-color: token("utility.shadow.colour");
-  --shadow-size: token("utility.shadow.size");
-  --shadow-shape: 0 0 var(--shadow-size);
-  --box-shadow: var(--shadow-shape) var(--shadow-color);
-  --border-radius: token("utility.radius.m");
-  --border-radius-l: token("utility.radius.l");
-  --border-radius-round: token("utility.radius.round");
-  --ratio: token("utility.ratio");
-  --ease: cubic-bezier(0.25, 0, 0.3, 1);
-}
-
-@media (--medium-down) {
+@layer design-system.defaults {
   :root {
-    --section-xl: var(--spacing-xxl);
+    /* Brand colors */
+    --colour-primary: token("colour.primary.colour");
+    --colour-primary-light: color-mix(in oklch, var(--colour-primary), white 90%);
+    --colour-primary-lighter: color-mix(in oklch, var(--colour-primary), white 20%);
+    --colour-primary-darker: color-mix(in oklch, var(--colour-primary), black 10%);
+    --colour-primary-scheme: token("colour.primary.scheme");
+    --colour-accent: token("colour.accent.colour");
+    --colour-accent-light: color-mix(in oklch, var(--colour-accent), white 90%);
+    --colour-accent-lighter: color-mix(in oklch, var(--colour-accent), white 20%);
+    --colour-accent-darker: color-mix(in oklch, var(--colour-accent), black 10%);
+    --colour-accent-scheme: token("colour.accent.scheme");
+
+    /* System colours */
+    --colour-scheme: token("colour.main.scheme");
+
+    color-scheme: var(--colour-scheme);
+
+    --colour-background: light-dark(token("colour.main.bg"), token("colour.reverse.bg"));
+    --colour-background-alt: light-dark(token("colour.main.bgAlt"), token("colour.reverse.bgAlt"));
+    --colour-foreground: light-dark(token("colour.main.fg"), token("colour.reverse.fg"));
+    --colour-foreground-alt: light-dark(token("colour.main.fgAlt"), token("colour.reverse.fgAlt"));
+    --colour-border: light-dark(token("colour.main.border"), token("colour.reverse.border"));
+    --colour-link: light-dark(var(--colour-primary), var(--colour-primary-light));
+
+    /* Reverse colors */
+    --colour-foreground-reverse: light-dark(token("colour.reverse.fg"), token("colour.main.fg"));
+    --colour-background-reverse: light-dark(token("colour.reverse.bg"), token("colour.main.bg"));
+    --colour-reverse-scheme: token("colour.reverse.scheme");
+
+    /* State colours */
+    --colour-error: token("colour.error");
+    --colour-success: token("colour.success");
+    --colour-warning: token("colour.warning");
+    --colour-info: token("colour.info");
+
+    /* Typography */
+    --font-family: token("font.family");
+    --type-ratio: token("font.size.ratio");
+    --type-ratio-small: token("font.size.ratioSmall");
+    --base-font-size: max(1rem, token("font.size.basePx"));
+    --font-size: var(--base-font-size);
+    --font-size-s: calc(var(--base-font-size) / var(--type-ratio-small));
+    --font-size-xs: calc(var(--font-size-s) / var(--type-ratio-small));
+    --font-size-sm: calc(var(--base-font-size) * var(--type-ratio-small));
+    --font-size-m: calc(var(--base-font-size) * var(--type-ratio));
+    --font-size-l: calc(var(--font-size-m) * var(--type-ratio));
+    --font-size-xl: calc(var(--font-size-l) * var(--type-ratio));
+    --font-size-xxl: calc(var(--font-size-xl) * var(--type-ratio));
+    --font-size-xxxl: calc(var(--font-size-xxl) * var(--type-ratio));
+    --font-size-diff: token("font.size.diff");
+
+    --line-height: token("font.lineHeight.main");
+    --line-height-h: token("font.lineHeight.heading");
+    --line-height-ui: token("font.lineHeight.ui");
+
+    --font-weight-normal: token("font.weight.main");
+    --font-weight-bold: token("font.weight.bold");
+
+    /* Spacing */
+    --spacing-xxxxs: token("size.spacing.xxxxs");
+    --spacing-xxxs: token("size.spacing.xxxs");
+    --spacing-xxs: token("size.spacing.xxs");
+    --spacing-xs: token("size.spacing.xs");
+    --spacing-s: token("size.spacing.s");
+    --spacing-m: token("size.spacing.m");
+    --spacing-l: token("size.spacing.l");
+    --spacing-xl: token("size.spacing.xl");
+    --spacing-xxl: token("size.spacing.xxl");
+    --spacing-xxxl: token("size.spacing.xxxl");
+    --spacing-xxxxl: token("size.spacing.xxxl");
+    --spacing-ul: token("size.spacing.ul");
+    --spacing-uul: token("size.spacing.uul");
+    --spacing-uuul: token("size.spacing.uuul");
+
+    --outline-width: token("utility.outline.width");
+    --outline-style: token("utility.outline.style");
+    --_colour-outline: token("utility.outline.colour");
+    --outline-color: light-dark(
+      var(--_colour-outline),
+      color-mix(in oklch, var(--_colour-outline), white 90%)
+    );
+
+    /* Layout */
+    --container-max-width-narrow: token("size.container.narrow");
+    --container-max-width: token("size.container.aligned");
+    --gutter-min: token("size.container.gutterMin");
+    --gutter-max: token("size.container.gutterMax");
+    --gap-s: token("size.gap.s");
+    --gap: token("size.gap.m");
+    --gap-l: token("size.gap.l");
+    --gap-xl: token("size.gap.xl");
+    --breakpoint-xs: token("breakpoint.xs");
+    --breakpoint-s: token("breakpoint.s");
+    --breakpoint-m: token("breakpoint.m");
+    --breakpoint-l: token("breakpoint.l");
+    --breakpoint-xl: token("breakpoint.xl");
+
+    /* Utility */
+    --shadow-color: token("utility.shadow.colour");
+    --shadow-size: token("utility.shadow.size");
+    --shadow-shape: 0 0 var(--shadow-size);
+    --box-shadow: var(--shadow-shape) var(--shadow-color);
+    --border-radius: token("utility.radius.m");
+    --border-radius-l: token("utility.radius.l");
+    --border-radius-round: token("utility.radius.round");
+    --ratio: token("utility.ratio");
+    --ease: cubic-bezier(0.25, 0, 0.3, 1);
+  }
+
+  @media (--medium-down) {
+    :root {
+      --section-xl: var(--spacing-xxl);
+    }
   }
 }

package/src/enums.ts

@@ -146,6 +146,7 @@ export enum Icons {
   TRASH = "trash",
   USER = "user",
   SHARE = "share",
+  QUESTION = "question",
 }
 
 export enum GridColumns {

package/src/tokens.js

@@ -29,27 +29,34 @@ export default {
     dropMenu: "420px",
   },
   colour: {
-    scheme: "light",
-    primary: "260",
-    accent: "320",
+    primary: {
+      colour: "hsl(223 100% 50%)",
+      scheme: "dark",
+    },
+    accent: {
+      colour: "hsl(60, 94%, 68%)",
+      scheme: "light",
+    },
     main: {
-      fg: "oklch(0 0 100)",
-      bg: "oklch(1 0 100)",
-      fgAlt: "oklch(0.25 0 100)",
-      bgAlt: "oklch(0.95 0 100)",
-      border: "oklch(.9 0 100)",
+      fg: "hsl(60 30% 6%)",
+      bg: "hsl(60 0% 100%)",
+      fgAlt: "hsl(60 30% 20%)",
+      bgAlt: "hsl(60 30% 95%)",
+      border: "hsl(60 5% 85%)",
+      scheme: "light",
     },
     reverse: {
-      fg: "oklch(1 0 100)",
-      bg: "oklch(0 0 100)",
-      fgAlt: "oklch(0.95 0 100)",
-      bgAlt: "oklch(0.25 0 100)",
-      border: "oklch(0.25 0 100)",
+      fg: "hsl(60 0% 100%)",
+      bg: "hsl(60 30% 6%)",
+      fgAlt: "hsl(60 5% 60%)",
+      bgAlt: "hsl(60 0% 5%)",
+      border: "hsl(60 0% 20%)",
+      scheme: "dark",
     },
-    info: "260",
-    warning: "90",
-    success: "140",
-    error: "20",
+    info: "hsl(223 100% 50%)",
+    warning: "hsl(35 100% 32%)",
+    success: "hsl(120 100% 26%)",
+    error: "hsl(348 100% 33%)",
   },
   font: {
     family: "system-ui, sans-serif",
@@ -105,7 +112,7 @@ export default {
     outline: {
       width: "2px",
       style: "solid",
-      hue: "260",
+      colour: "oklch(50% 0.3 260)",
     },
     radius: {
       m: "4px",