npm - @aleph-alpha/config-css - Versions diffs - 0.18.134 → 0.20.0 - Mend

@aleph-alpha/config-css 0.18.134 → 0.20.0

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 (14) hide show

package/.lintstagedrc.js +2 -4
package/CHANGELOG.md +87 -7
package/dist/index.js +84 -81
package/package.json +3 -3
package/sd-output/box-shadows.json +7 -0
package/sd-output/dark-mode.json +150 -0
package/sd-output/global.json +4 -0
package/sd-output/light-mode.json +150 -0
package/sd-output/spacings.json +59 -0
package/sd-output/typography.json +15 -0
package/src/index.ts +2 -2
package/transformed-tokens/dark-mode.json +697 -0
package/transformed-tokens/global.json +560 -0
package/transformed-tokens/light-mode.json +697 -0

package/transformed-tokens/light-mode.json ADDED Viewed

@@ -0,0 +1,697 @@
+{
+  "core": {
+    "content": {
+      "primary": {
+        "value": "#1e1e23",
+        "type": "color",
+        "description": "Use for primary text, titles and primary icon color."
+      },
+      "secondary": {
+        "value": "#484851",
+        "type": "color",
+        "description": "Use for secondary text, multiline paragraphs and secondary icon color."
+      },
+      "tertiary": {
+        "value": "#646474",
+        "type": "color",
+        "description": "Use for text and icon color for outlined button, text button, dropdowns."
+      },
+      "placeholder": {
+        "value": "#646474",
+        "type": "color",
+        "description": "Use for placeholders."
+      },
+      "on-bg-inverse": {
+        "value": "#fbfbfd",
+        "type": "color",
+        "description": "Use on color if color is inversed (fro example in dark mode on white or in light mode on dark background colors)"
+      },
+      "always-white": {
+        "value": "#f2f2f8",
+        "type": "color",
+        "description": "Similar in both, dark and light mode. Use on similar colors or images."
+      },
+      "accent-soft": {
+        "value": "#3c26eb",
+        "type": "color",
+        "description": "Use for secondary buttons."
+      },
+      "always-black": {
+        "value": "#0f0f12",
+        "type": "color"
+      },
+      "link-visited": {
+        "value": "#2b1ca3",
+        "type": "color"
+      },
+      "accent": {
+        "value": "#fbfbfd",
+        "type": "color",
+        "description": "Use for content on selected buttons, instead of core/content/on-bg-inverse"
+      }
+    },
+    "bg": {
+      "primary": {
+        "value": "#fbfbfd",
+        "type": "color",
+        "description": "Use for top bar, side bar and text fields."
+      },
+      "secondary": {
+        "value": "#f2f2f8",
+        "type": "color",
+        "description": "Use as a secondary background color."
+      },
+      "tertiary": {
+        "value": "#fbfbfd",
+        "type": "color",
+        "description": "Use as a background color for outlined buttons and dropdowns."
+      },
+      "tertiary-hover": {
+        "value": "#dbdbe9",
+        "type": "color",
+        "description": "Use as a hover color for outlined buttons or dropdowns."
+      },
+      "accent": {
+        "value": "#555cf9",
+        "type": "color",
+        "description": "Use as a accent color."
+      },
+      "accent-soft": {
+        "value": "#d0daff",
+        "type": "color",
+        "description": "Use as a background color for secondary buttons."
+      },
+      "accent-soft-hover": {
+        "value": "#b2bfff",
+        "type": "color",
+        "description": "Use as a hover color for secondary buttons"
+      },
+      "on-color-inverse": {
+        "value": "#1e1e23",
+        "type": "color",
+        "description": "Use as a background color for inverse. For example light background in dark mode or dark background in light mode."
+      },
+      "loading": {
+        "value": "#4841f2",
+        "type": "color",
+        "description": "Use for loading indicators."
+      },
+      "modal-overlay": {
+        "value": "#0f0f12bf",
+        "type": "color",
+        "description": "Use for modal background"
+      },
+      "gradient-0": {
+        "value": "#fbfbfd00",
+        "type": "color",
+        "description": "Use for gradient"
+      },
+      "accent-hover": {
+        "value": "#433de2",
+        "type": "color"
+      },
+      "text-mark-soft": {
+        "value": "#e5ebff",
+        "type": "color"
+      },
+      "text-mark-soft-hover": {
+        "value": "#d0daff",
+        "type": "color"
+      },
+      "text-mark": {
+        "value": "#b2bfff",
+        "type": "color"
+      },
+      "text-mark-hover": {
+        "value": "#9397fe",
+        "type": "color"
+      },
+      "skeleton": {
+        "value": "#9595ac",
+        "type": "color"
+      }
+    },
+    "border": {
+      "default": {
+        "value": "#dbdbe9",
+        "type": "color",
+        "description": "Use as a default border color for buttons and other elements, or as seperation."
+      },
+      "focus": {
+        "value": "#555cf9",
+        "type": "color",
+        "description": "Use as focus ring color for all interactive elements."
+      },
+      "hover": {
+        "value": "#9595ac",
+        "type": "color",
+        "description": "Use as a default border color for buttons and other elements, or as seperation."
+      },
+      "contrast": {
+        "value": "#7f7f94",
+        "type": "color"
+      },
+      "contrast-hover": {
+        "value": "#33333c",
+        "type": "color"
+      },
+      "text-mark": {
+        "value": "#555cf9",
+        "type": "color"
+      },
+      "text-mark-hover": {
+        "value": "#433de2",
+        "type": "color"
+      }
+    }
+  },
+  "brand": {
+    "content": {
+      "default": {
+        "value": "#0f0f12",
+        "type": "color",
+        "description": "Use as a text and icon color for primary buttons."
+      },
+      "brand-soft": {
+        "value": "#576200",
+        "type": "color",
+        "description": "Use as a text color for the brand-soft background, for highlighting."
+      }
+    },
+    "bg": {
+      "brand": {
+        "value": "#cce804",
+        "type": "color",
+        "description": "Use as a background color for primary action button."
+      },
+      "brand-hover": {
+        "value": "#dcf706",
+        "type": "color",
+        "description": "Use as a hover color for primary action button."
+      },
+      "brand-soft": {
+        "value": "#e9f781",
+        "type": "color",
+        "description": "Use as a background color to highlight."
+      }
+    },
+    "border": {
+      "default": {
+        "value": "#bcd902",
+        "type": "color",
+        "description": "Use as a border color for brand colored elements."
+      }
+    }
+  },
+  "semantic": {
+    "content": {
+      "success": {
+        "value": "#fbfbfd",
+        "type": "color",
+        "description": "Use as a text and icon color for medium - high priority success notifications or tags."
+      },
+      "success-soft": {
+        "value": "#166534",
+        "type": "color",
+        "description": "Use as a text and icon color for low priority success notifications or tags."
+      },
+      "error": {
+        "value": "#fbfbfd",
+        "type": "color",
+        "description": "Use as a text and icon color for medium - high priority error notifications or tags."
+      },
+      "error-soft": {
+        "value": "#991b1b",
+        "type": "color",
+        "description": "Use as a text and icon color for soft priority error notifications or tags."
+      },
+      "warning": {
+        "value": "#0f0f12",
+        "type": "color",
+        "description": "Use as a text and icon color for medium - high priority warning notifications or tags."
+      },
+      "warning-soft": {
+        "value": "#854d0e",
+        "type": "color",
+        "description": "Use as a text and icon color for low priority warning notifications or tags."
+      },
+      "info": {
+        "value": "#fbfbfd",
+        "type": "color",
+        "description": "Use as a text and icon color for medium - high priority info notifications or tags."
+      },
+      "info-soft": {
+        "value": "#2b1ca3",
+        "type": "color",
+        "description": "Use as a text and icon color for low priority info notifications or tags."
+      },
+      "error-label": {
+        "value": "#dc2626",
+        "type": "color"
+      },
+      "success-label": {
+        "value": "#15803d",
+        "type": "color",
+        "description": "Use for text or icon color for succeeded elements."
+      }
+    },
+    "bg": {
+      "success": {
+        "value": "#15803d",
+        "type": "color",
+        "description": "Use as a background color for medium - high priority success notifications or tags."
+      },
+      "success-soft": {
+        "value": "#dcfce7",
+        "type": "color",
+        "description": "Use as a background color for low priority success notifications or tags."
+      },
+      "success-action": {
+        "value": "#166534",
+        "type": "color",
+        "description": "Use as a background color for action buttons on medium - high priority success notifications."
+      },
+      "success-soft-action": {
+        "value": "#bbf7d0",
+        "type": "color",
+        "description": "Use as a background color for action buttons on low priority success notifications."
+      },
+      "error": {
+        "value": "#dc2626",
+        "type": "color",
+        "description": "Use as a background color for medium - high priority error notifications or tags."
+      },
+      "error-action": {
+        "value": "#b91c1c",
+        "type": "color",
+        "description": "Use as a background color for action buttons on medium - high priority error notifications."
+      },
+      "error-soft": {
+        "value": "#fee2e2",
+        "type": "color",
+        "description": "Use as a background color for low priority error notifications or tags."
+      },
+      "error-soft-action": {
+        "value": "#fecaca",
+        "type": "color",
+        "description": "Use as a background color for action buttons on low priority success notifications."
+      },
+      "warning": {
+        "value": "#fcdc3c",
+        "type": "color",
+        "description": "Use as a background color for medium - high priority warning notifications or tags."
+      },
+      "warning-action": {
+        "value": "#f2bf0f",
+        "type": "color",
+        "description": "Use as a background color for action buttons on medium - high priority warning notifications."
+      },
+      "warning-soft": {
+        "value": "#fefacf",
+        "type": "color",
+        "description": "Use as a background color for low priority warning notifications or tags."
+      },
+      "warning-soft-action": {
+        "value": "#fef08a",
+        "type": "color",
+        "description": "Use as a background color for action buttons on soft priority success notifications."
+      },
+      "info": {
+        "value": "#433de2",
+        "type": "color",
+        "description": "Use as a background color for medium - high priority info notifications or tags."
+      },
+      "info-action": {
+        "value": "#3421c7",
+        "type": "color",
+        "description": "Use as a background color for action buttons on medium - high priority info notifications."
+      },
+      "info-soft": {
+        "value": "#e5ebff",
+        "type": "color",
+        "description": "Use as a background color for low priority info notifications or tags."
+      },
+      "info-soft-action": {
+        "value": "#d0daff",
+        "type": "color",
+        "description": "Use as a background color for action buttons on low priority info notifications."
+      },
+      "error-action-hover": {
+        "value": "#991b1b",
+        "type": "color",
+        "description": "Use as background for high priority action buttons on hover."
+      },
+      "success-action-hover": {
+        "value": "#0a4d25",
+        "type": "color"
+      }
+    },
+    "border": {
+      "success": {
+        "value": "#166534",
+        "type": "color",
+        "description": "Use as a border color for medium - high priority success notifications or tags."
+      },
+      "success-soft": {
+        "value": "#bbf7d0",
+        "type": "color",
+        "description": "Use as a border color for low priority success notifications or tags."
+      },
+      "error": {
+        "value": "#991b1b",
+        "type": "color",
+        "description": "Use as a border color for medium - high priority error notifications or tags."
+      },
+      "error-soft": {
+        "value": "#fecaca",
+        "type": "color",
+        "description": "Use as a border color for low priority success notifications or tags."
+      },
+      "warning": {
+        "value": "#facc15",
+        "type": "color",
+        "description": "Use as a border color for medium - high priority warning notifications or tags."
+      },
+      "warning-soft": {
+        "value": "#fef08a",
+        "type": "color",
+        "description": "Use as a border color for low priority success notifications or tags."
+      },
+      "info": {
+        "value": "#3c26eb",
+        "type": "color",
+        "description": "Use as a border color for medium - high priority info notifications or tags."
+      },
+      "info-soft": {
+        "value": "#d0daff",
+        "type": "color",
+        "description": "Use as a border color for low priority success notifications or tags."
+      }
+    }
+  },
+  "primitives": {
+    "neutral": {
+      "25": {
+        "value": "#fbfbfd",
+        "type": "color"
+      },
+      "50": {
+        "value": "#f2f2f8",
+        "type": "color"
+      },
+      "100": {
+        "value": "#ebebf4",
+        "type": "color"
+      },
+      "150": {
+        "value": "#dbdbe9",
+        "type": "color"
+      },
+      "200": {
+        "value": "#ccccde",
+        "type": "color"
+      },
+      "300": {
+        "value": "#b9b9ce",
+        "type": "color"
+      },
+      "400": {
+        "value": "#9595ac",
+        "type": "color"
+      },
+      "450": {
+        "value": "#7f7f94",
+        "type": "color"
+      },
+      "500": {
+        "value": "#646474",
+        "type": "color"
+      },
+      "600": {
+        "value": "#484851",
+        "type": "color"
+      },
+      "700": {
+        "value": "#33333c",
+        "type": "color"
+      },
+      "800": {
+        "value": "#1e1e23",
+        "type": "color"
+      },
+      "900": {
+        "value": "#17171c",
+        "type": "color"
+      },
+      "950": {
+        "value": "#0f0f12",
+        "type": "color"
+      },
+      "950-0": {
+        "value": "#0f0f1200",
+        "type": "color",
+        "description": "Use for gradient"
+      },
+      "25-0": {
+        "value": "#fbfbfd00",
+        "type": "color",
+        "description": "Use for gradient"
+      },
+      "950-75": {
+        "value": "#0f0f12bf",
+        "type": "color",
+        "description": "Use for modal background"
+      }
+    },
+    "brand": {
+      "25": {
+        "value": "#fdffee",
+        "type": "color"
+      },
+      "50": {
+        "value": "#fbffdc",
+        "type": "color"
+      },
+      "100": {
+        "value": "#f8ffbf",
+        "type": "color"
+      },
+      "200": {
+        "value": "#f3ff92",
+        "type": "color"
+      },
+      "250": {
+        "value": "#e9f781",
+        "type": "color"
+      },
+      "300": {
+        "value": "#e6f668",
+        "type": "color"
+      },
+      "400": {
+        "value": "#e0f538",
+        "type": "color"
+      },
+      "500": {
+        "value": "#dcf706",
+        "type": "color"
+      },
+      "550": {
+        "value": "#cce804",
+        "type": "color"
+      },
+      "600": {
+        "value": "#bcd902",
+        "type": "color"
+      },
+      "700": {
+        "value": "#a5b900",
+        "type": "color"
+      },
+      "800": {
+        "value": "#798800",
+        "type": "color"
+      },
+      "900": {
+        "value": "#576200",
+        "type": "color"
+      },
+      "950": {
+        "value": "#3c4301",
+        "type": "color"
+      }
+    },
+    "ultramarine": {
+      "25": {
+        "value": "#f4f5ff",
+        "type": "color"
+      },
+      "50": {
+        "value": "#e5ebff",
+        "type": "color"
+      },
+      "100": {
+        "value": "#d0daff",
+        "type": "color"
+      },
+      "200": {
+        "value": "#b2bfff",
+        "type": "color"
+      },
+      "300": {
+        "value": "#9397fe",
+        "type": "color"
+      },
+      "400": {
+        "value": "#555cf9",
+        "type": "color"
+      },
+      "450": {
+        "value": "#4841f2",
+        "type": "color"
+      },
+      "500": {
+        "value": "#433de2",
+        "type": "color"
+      },
+      "600": {
+        "value": "#3c26eb",
+        "type": "color"
+      },
+      "700": {
+        "value": "#3421c7",
+        "type": "color"
+      },
+      "800": {
+        "value": "#2b1ca3",
+        "type": "color"
+      },
+      "900": {
+        "value": "#231780",
+        "type": "color"
+      },
+      "950": {
+        "value": "#1b125c",
+        "type": "color"
+      }
+    },
+    "green": {
+      "100": {
+        "value": "#dcfce7",
+        "type": "color"
+      },
+      "200": {
+        "value": "#bbf7d0",
+        "type": "color"
+      },
+      "300": {
+        "value": "#70f3a0",
+        "type": "color"
+      },
+      "400": {
+        "value": "#4ade80",
+        "type": "color"
+      },
+      "700": {
+        "value": "#15803d",
+        "type": "color"
+      },
+      "800": {
+        "value": "#166534",
+        "type": "color"
+      },
+      "900": {
+        "value": "#0a4d25",
+        "type": "color"
+      },
+      "950": {
+        "value": "#052e16",
+        "type": "color"
+      }
+    },
+    "red": {
+      "100": {
+        "value": "#fee2e2",
+        "type": "color"
+      },
+      "200": {
+        "value": "#fecaca",
+        "type": "color"
+      },
+      "300": {
+        "value": "#fe8c8c",
+        "type": "color"
+      },
+      "400": {
+        "value": "#f87171",
+        "type": "color"
+      },
+      "600": {
+        "value": "#dc2626",
+        "type": "color"
+      },
+      "700": {
+        "value": "#b91c1c",
+        "type": "color"
+      },
+      "800": {
+        "value": "#991b1b",
+        "type": "color"
+      },
+      "900": {
+        "value": "#6f1313",
+        "type": "color"
+      },
+      "950": {
+        "value": "#450a0a",
+        "type": "color"
+      }
+    },
+    "yellow": {
+      "50": {
+        "value": "#fefacf",
+        "type": "color"
+      },
+      "100": {
+        "value": "#fef9c3",
+        "type": "color"
+      },
+      "200": {
+        "value": "#fef08a",
+        "type": "color"
+      },
+      "300": {
+        "value": "#feeb62",
+        "type": "color"
+      },
+      "400": {
+        "value": "#fcdc3c",
+        "type": "color"
+      },
+      "500": {
+        "value": "#facc15",
+        "type": "color"
+      },
+      "550": {
+        "value": "#f2bf0f",
+        "type": "color"
+      },
+      "600": {
+        "value": "#eab308",
+        "type": "color"
+      },
+      "800": {
+        "value": "#854d0e",
+        "type": "color"
+      },
+      "900": {
+        "value": "#64370a",
+        "type": "color"
+      },
+      "950": {
+        "value": "#422006",
+        "type": "color"
+      }
+    }
+  }
+}