npm - @tokenami/ds - Versions diffs - 0.0.74 → 0.0.75 - Mend

@tokenami/ds 0.0.74 → 0.0.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -40,6 +40,8 @@ Use the fluid spacing and font size tokens to create responsive designs without
 ### Spacing
+Use the `--fluid-<property-type>-clamp_<breakpoint-range>` toggle token to apply fluid spacing.
 The following example will apply `8px` (`0.5rem`) padding to your element at the smallest breakpoint, and `16px` (`1rem`) padding at the largest breakpoint.
 ```tsx
@@ -50,7 +52,7 @@ css({
 });
 ```
-You can adjust the breakpoints the fluid spacings apply to by changing the `--padding` clamp value:
+Adjust the breakpoints for fluid spacings by updating the breakpoint range:
 ```diff
 css({
@@ -83,6 +85,14 @@ The design system uses [Radix UI P3 colours](https://www.radix-ui.com/colors) an
 A powerful feature of this palette is dark mode by default when applying the appropriate steps in the scale to each use case. Find out more about [how to use the Radix palette](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale) on their website.
+### Colour space
+Use the `--color-space` property to change the colour space for the colours in your application. It defaults to `srgb`.
+```tsx
+<body style={css({ '--color-space': 'oklch' })}></body>
+```
 ### Gradients
 Use the `--gradient_to-[t|r|b|l|tr|tl|br|bl]` tokens along with the `--gradient-from` and `--gradient-to` custom properties to apply gradients.
@@ -95,13 +105,17 @@ css({
 });
 ```
-The base gradients use the sRGB colour space to match the behaviour of design tools, but you can use the `--gradient_hd-to-[t|r|b|l|tr|tl|br|bl]` tokens to apply gradients using the OKLCH colour space for a more accurate representation of colour.
+The gradients respect the colour space set by the `--color-space` property.
+### Opacity, tint, and shade
+Use the `--mix-<property-type>-[tint|shade|opacity]` toggle tokens along with the `--mix-<property-type>-color` and `--mix-<property-type>-percent` custom properties to add opacity, tint or shade to your colours.
 ```tsx
 css({
-  '--background-image': 'var(--gradient_hd-to-b)',
-  '--gradient-from': 'var(--color_crimson9)',
-  '--gradient-to': 'var(--color_green10)',
+  '--background-color': 'var(--mix-bg_opacity)',
+  '--mix-bg-color': 'var(--color_violet11)', // the colour to apply the opacity, tint or shade to
+  '--mix-bg-percent': 50, // bg will be 50% opacity
 });
 ```

package/dist/index.cjs CHANGED Viewed

@@ -165,6 +165,12 @@ var fluid = (params) => {
     ---${params.property}-intercept: calc(var(---${params.property}-min) - (var(---${params.property}-scope) * ${breakpointMin}));
   `;
 };
+var colorMixOpacity = (property) => {
+  return `color-mix(in var(--color-space, srgb), var(--${property}-color) calc(var(--${property}-percent) * 1%), transparent)`;
+};
+var colorMix = (property, color) => {
+  return `color-mix(in var(--color-space, srgb), var(--${property}-color), ${color} calc(var(--${property}-percent) * 1%))`;
+};
 var src_default = config.createConfig({
   include: [],
   grid: rem(BASE_GRID_SIZE),
@@ -313,7 +319,7 @@ var src_default = config.createConfig({
     "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
       height: "auto"
     },
-    "::webkit-search-decoration": {
+    "::-webkit-search-decoration": {
       WebkitAppearance: "none"
     },
     summary: {
@@ -366,29 +372,6 @@ var src_default = config.createConfig({
       }
     },
     root: {
-      alpha: {
-        "0": 0,
-        "5": 0.05,
-        "10": 0.1,
-        "15": 0.15,
-        "20": 0.2,
-        "25": 0.25,
-        "30": 0.3,
-        "35": 0.35,
-        "40": 0.4,
-        "45": 0.45,
-        "50": 0.5,
-        "55": 0.55,
-        "60": 0.6,
-        "65": 0.65,
-        "70": 0.7,
-        "75": 0.75,
-        "80": 0.8,
-        "85": 0.85,
-        "90": 0.9,
-        "95": 0.95,
-        "100": 1
-      },
       anim: {
         none: "none",
         spin: "spin 1s linear infinite",
@@ -413,6 +396,11 @@ var src_default = config.createConfig({
         "6xl": rem(1152),
         "7xl": rem(1280)
       },
+      "color-space": {
+        srgb: "",
+        oklch: "oklch",
+        oklab: "oklab"
+      },
       "drop-shadow": {
         xs: "drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))",
         sm: "drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))",
@@ -1055,22 +1043,14 @@ var src_default = config.createConfig({
         mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`
       },
       gradient: {
-        "to-t": optionalViaGradient("to top in srgb"),
-        "to-tr": optionalViaGradient("to top right in srgb"),
-        "to-r": optionalViaGradient("to right in srgb"),
-        "to-br": optionalViaGradient("to bottom right in srgb"),
-        "to-b": optionalViaGradient("to bottom in srgb"),
-        "to-bl": optionalViaGradient("to bottom left in srgb"),
-        "to-l": optionalViaGradient("to left in srgb"),
-        "to-tl": optionalViaGradient("to top left in srgb"),
-        "hd-to-t": optionalViaGradient("to top in oklch"),
-        "hd-to-tr": optionalViaGradient("to top right in oklch"),
-        "hd-to-r": optionalViaGradient("to right in oklch"),
-        "hd-to-br": optionalViaGradient("to bottom right in oklch"),
-        "hd-to-b": optionalViaGradient("to bottom in oklch"),
-        "hd-to-bl": optionalViaGradient("to bottom left in oklch"),
-        "hd-to-l": optionalViaGradient("to left in oklch"),
-        "hd-to-tl": optionalViaGradient("to top left in oklch")
+        "to-t": optionalViaGradient("to top in var(--color-space, srgb)"),
+        "to-tr": optionalViaGradient("to top right in var(--color-space, srgb)"),
+        "to-r": optionalViaGradient("to right in var(--color-space, srgb)"),
+        "to-br": optionalViaGradient("to bottom right in var(--color-space, srgb)"),
+        "to-b": optionalViaGradient("to bottom in var(--color-space, srgb)"),
+        "to-bl": optionalViaGradient("to bottom left in var(--color-space, srgb)"),
+        "to-l": optionalViaGradient("to left in var(--color-space, srgb)"),
+        "to-tl": optionalViaGradient("to top left in var(--color-space, srgb)")
       },
       space: {
         "0": 0,
@@ -1129,6 +1109,91 @@ var src_default = config.createConfig({
         relaxed: 1.625,
         loose: 2
       },
+      mix: {
+        opacity: colorMixOpacity("mix"),
+        tint: colorMix("mix", "#fff"),
+        shade: colorMix("mix", "#000")
+      },
+      "mix-accent": {
+        opacity: colorMixOpacity("mix-accent"),
+        tint: colorMix("mix-accent", "#fff"),
+        shade: colorMix("mix-accent", "#000")
+      },
+      "mix-bg": {
+        opacity: colorMixOpacity("mix-bg"),
+        tint: colorMix("mix-bg", "#fff"),
+        shade: colorMix("mix-bg", "#000")
+      },
+      "mix-border": {
+        opacity: colorMixOpacity("mix-border"),
+        tint: colorMix("mix-border", "#fff"),
+        shade: colorMix("mix-border", "#000")
+      },
+      "mix-border-top": {
+        opacity: colorMixOpacity("mix-border-top"),
+        tint: colorMix("mix-border-top", "#fff"),
+        shade: colorMix("mix-border-top", "#000")
+      },
+      "mix-border-right": {
+        opacity: colorMixOpacity("mix-border-right"),
+        tint: colorMix("mix-border-right", "#fff"),
+        shade: colorMix("mix-border-right", "#000")
+      },
+      "mix-border-bottom": {
+        opacity: colorMixOpacity("mix-border-bottom"),
+        tint: colorMix("mix-border-bottom", "#fff"),
+        shade: colorMix("mix-border-bottom", "#000")
+      },
+      "mix-border-left": {
+        opacity: colorMixOpacity("mix-border-left"),
+        tint: colorMix("mix-border-left", "#fff"),
+        shade: colorMix("mix-border-left", "#000")
+      },
+      "mix-border-x": {
+        opacity: colorMixOpacity("mix-border-x"),
+        tint: colorMix("mix-border-x", "#fff"),
+        shade: colorMix("mix-border-x", "#000")
+      },
+      "mix-border-y": {
+        opacity: colorMixOpacity("mix-border-y"),
+        tint: colorMix("mix-border-y", "#fff"),
+        shade: colorMix("mix-border-y", "#000")
+      },
+      "mix-caret": {
+        opacity: colorMixOpacity("mix-caret"),
+        tint: colorMix("mix-caret", "#fff"),
+        shade: colorMix("mix-caret", "#000")
+      },
+      "mix-column-rule": {
+        opacity: colorMixOpacity("mix-column-rule"),
+        tint: colorMix("mix-column-rule", "#fff"),
+        shade: colorMix("mix-column-rule", "#000")
+      },
+      "mix-fill": {
+        opacity: colorMixOpacity("mix-fill"),
+        tint: colorMix("mix-fill", "#fff"),
+        shade: colorMix("mix-fill", "#000")
+      },
+      "mix-outline": {
+        opacity: colorMixOpacity("mix-outline"),
+        tint: colorMix("mix-outline", "#fff"),
+        shade: colorMix("mix-outline", "#000")
+      },
+      "mix-stroke": {
+        opacity: colorMixOpacity("mix-stroke"),
+        tint: colorMix("mix-stroke", "#fff"),
+        shade: colorMix("mix-stroke", "#000")
+      },
+      "mix-text-decoration": {
+        opacity: colorMixOpacity("mix-text-decoration"),
+        tint: colorMix("mix-text-decoration", "#fff"),
+        shade: colorMix("mix-text-decoration", "#000")
+      },
+      "mix-shadow": {
+        opacity: colorMixOpacity("mix-shadow"),
+        tint: colorMix("mix-shadow", "#fff"),
+        shade: colorMix("mix-shadow", "#000")
+      },
       morph: {
         none: "none",
         all: "all cubic-bezier(0.4, 0, 0.2, 1) 150ms",
@@ -1478,13 +1543,13 @@ var src_default = config.createConfig({
     w: ["inline-size"]
   },
   properties: {
-    "accent-color": ["color"],
+    "accent-color": ["color", "mix-accent"],
     animation: ["anim"],
     "animation-timing-function": ["ease"],
     "aspect-ratio": ["ratio"],
     "backdrop-filter": ["effect"],
-    background: ["color", "gradient"],
-    "background-color": ["color"],
+    background: ["color", "gradient", "mix-bg"],
+    "background-color": ["color", "mix-bg"],
     "background-image": ["gradient"],
     "background-position-x": ["grid", "space"],
     "background-position-y": ["grid", "space"],
@@ -1509,17 +1574,17 @@ var src_default = config.createConfig({
     "border-inline-start-width": ["line-size"],
     "border-inline-end": ["line"],
     "border-inline-end-width": ["line-size"],
-    "border-color": ["color"],
-    "border-top-color": ["color"],
-    "border-right-color": ["color"],
-    "border-bottom-color": ["color"],
-    "border-left-color": ["color"],
-    "border-block-color": ["color"],
-    "border-block-start-color": ["color"],
-    "border-block-end-color": ["color"],
-    "border-inline-color": ["color"],
-    "border-inline-start-color": ["color"],
-    "border-inline-end-color": ["color"],
+    "border-color": ["color", "mix-border"],
+    "border-top-color": ["color", "mix-border-top"],
+    "border-right-color": ["color", "mix-border-right"],
+    "border-bottom-color": ["color", "mix-border-bottom"],
+    "border-left-color": ["color", "mix-border-left"],
+    "border-block-color": ["color", "mix-border-y"],
+    "border-block-start-color": ["color", "mix-border-top"],
+    "border-block-end-color": ["color", "mix-border-bottom"],
+    "border-inline-color": ["color", "mix-border-x"],
+    "border-inline-start-color": ["color", "mix-border-left"],
+    "border-inline-end-color": ["color", "mix-border-right"],
     "border-radius": ["radii"],
     "border-top-left-radius": ["radii"],
     "border-top-right-radius": ["radii"],
@@ -1532,16 +1597,16 @@ var src_default = config.createConfig({
     "border-spacing": ["grid", "fluid-border-spacing-clamp"],
     bottom: ["grid", "space", "fluid-bottom-clamp"],
     "box-shadow": ["shadow"],
-    "caret-color": ["color"],
-    color: ["color"],
+    "caret-color": ["color", "mix-caret"],
+    color: ["color", "mix"],
     "column-gap": ["grid", "fluid-column-gap-clamp"],
     "column-rule": ["line"],
-    "column-rule-color": ["color"],
+    "column-rule-color": ["color", "mix-column-rule"],
     "column-rule-width": ["line-size"],
     columns: ["col"],
     "column-width": ["size", "grid", "fluid-column-width-clamp"],
     filter: ["effect", "drop-shadow"],
-    fill: ["color"],
+    fill: ["color", "mix-fill"],
     flex: ["flex"],
     "flex-basis": ["grid", "space", "fluid-flex-basis-clamp"],
     font: ["text"],
@@ -1584,9 +1649,9 @@ var src_default = config.createConfig({
     "min-height": ["size", "grid", "fluid-min-width-clamp"],
     "min-inline-size": ["size", "grid", "fluid-min-width-clamp"],
     "min-width": ["size", "grid", "fluid-min-height-clamp"],
-    opacity: ["alpha"],
+    opacity: ["number"],
     outline: ["line"],
-    "outline-color": ["color"],
+    "outline-color": ["color", "mix-outline"],
     "outline-width": ["line-size"],
     "outline-offset": ["offset"],
     padding: ["grid", "fluid-p-clamp"],
@@ -1624,9 +1689,9 @@ var src_default = config.createConfig({
     "scroll-padding-right": ["grid", "fluid-scroll-pr-clamp"],
     "scroll-padding-bottom": ["grid", "fluid-scroll-pb-clamp"],
     "scroll-padding-left": ["grid", "fluid-scroll-pl-clamp"],
-    stroke: ["color"],
+    stroke: ["color", "mix-stroke"],
     "stroke-width": ["grid", "fluid-stroke-width-clamp"],
-    "text-decoration-color": ["color"],
+    "text-decoration-color": ["color", "mix-text-decoration"],
     "text-indent": ["grid", "fluid-text-indent-clamp"],
     "text-shadow": ["shadow"],
     top: ["grid", "space", "fluid-top-clamp"],
@@ -1637,6 +1702,7 @@ var src_default = config.createConfig({
     width: ["size", "grid", "fluid-width-clamp"]
   },
   customProperties: {
+    "color-space": ["color-space"],
     "fluid-height-min": ["number"],
     "fluid-height-max": ["number"],
     "fluid-border-spacing-min": ["number"],
@@ -1743,7 +1809,41 @@ var src_default = config.createConfig({
     "gradient-to-stop": ["stop"],
     "gradient-via": ["color"],
     "gradient-via-stop": ["stop"],
-    "shadow-color": ["color"]
+    "mix-color": ["color"],
+    "mix-percent": ["number"],
+    "mix-accent-color": ["color"],
+    "mix-accent-percent": ["number"],
+    "mix-bg-color": ["color"],
+    "mix-bg-percent": ["number"],
+    "mix-border-color": ["color"],
+    "mix-border-percent": ["number"],
+    "mix-border-top-color": ["color"],
+    "mix-border-top-percent": ["number"],
+    "mix-border-right-color": ["color"],
+    "mix-border-right-percent": ["number"],
+    "mix-border-bottom-color": ["color"],
+    "mix-border-bottom-percent": ["number"],
+    "mix-border-left-color": ["color"],
+    "mix-border-left-percent": ["number"],
+    "mix-border-x-color": ["color"],
+    "mix-border-x-percent": ["number"],
+    "mix-border-y-color": ["color"],
+    "mix-border-y-percent": ["number"],
+    "mix-caret-color": ["color"],
+    "mix-caret-percent": ["number"],
+    "mix-column-rule-color": ["color"],
+    "mix-column-rule-percent": ["number"],
+    "mix-fill-color": ["color"],
+    "mix-fill-percent": ["number"],
+    "mix-outline-color": ["color"],
+    "mix-outline-percent": ["number"],
+    "mix-stroke-color": ["color"],
+    "mix-stroke-percent": ["number"],
+    "mix-text-decoration-color": ["color"],
+    "mix-text-decoration-percent": ["number"],
+    "mix-shadow-color": ["color"],
+    "mix-shadow-percent": ["number"],
+    "shadow-color": ["color", "mix-shadow"]
   }
 });