@jrgermain/stylesheet 0.17.3 → 0.18.0

package/README.md

@@ -4,4 +4,4 @@
 
 A lightweight, framework-agnostic design system written in pure CSS. Designed for me, available to all.
 
-For information on how to use this in your project, plus examples of all the components and their options, see https://stylesheet.jrgermain.dev/getting-started/introduction/.
+For information on how to use this in your project, plus examples of all the components and their options, see https://stylesheet.jrgermain.dev/info/getting-started/introduction/.

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./lib/tokens";

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./lib/tokens";

package/dist/{tokens.d.ts → lib/tokens.d.ts}

@@ -119,21 +119,7 @@ export declare enum Color {
     ContrastBackground = "var(--color-contrast-background)",
     ContrastText = "var(--color-contrast-text)",
     Shadow = "var(--color-shadow)",
-    Border = "var(--color-border)",
-    /** @deprecated use SurfaceSecondary */
-    Body = "var(--color-body)",
-    /** @deprecated use SurfaceSecondary */
-    Page = "var(--color-page)",
-    /** @deprecated use SurfacePrimary */
-    Surface = "var(--color-surface)",
-    /** @deprecated use SurfacePrimary */
-    BodyAlt = "var(--color-body-alt)",
-    /** @deprecated use TextPrimary */
-    BodyText = "var(--color-body-text)",
-    /** @deprecated use TextSecondary */
-    BodyTextAlt = "var(--color-body-text-alt)",
-    /** @deprecated use ContrastText */
-    BodyTextInvert = "var(--color-body-text-invert)"
+    Border = "var(--color-border)"
 }
 export declare enum FontSize {
     XS = "var(--font-size-xs)",

package/dist/lib/tokens.js

@@ -0,0 +1,207 @@
+export var Color;
+(function (Color) {
+    // Standard palette
+    Color["Brand1"] = "var(--color-brand-1)";
+    Color["Brand2"] = "var(--color-brand-2)";
+    Color["Brand3"] = "var(--color-brand-3)";
+    Color["Brand4"] = "var(--color-brand-4)";
+    Color["Brand5"] = "var(--color-brand-5)";
+    Color["Brand6"] = "var(--color-brand-6)";
+    Color["Brand7"] = "var(--color-brand-7)";
+    Color["Brand8"] = "var(--color-brand-8)";
+    Color["Brand9"] = "var(--color-brand-9)";
+    Color["BrandTransparent"] = "var(--color-brand-transparent)";
+    Color["BrandExtraTransparent"] = "var(--color-brand-extra-transparent)";
+    Color["Red1"] = "var(--color-red-1)";
+    Color["Red2"] = "var(--color-red-2)";
+    Color["Red3"] = "var(--color-red-3)";
+    Color["Red4"] = "var(--color-red-4)";
+    Color["Red5"] = "var(--color-red-5)";
+    Color["Red6"] = "var(--color-red-6)";
+    Color["Red7"] = "var(--color-red-7)";
+    Color["Red8"] = "var(--color-red-8)";
+    Color["Red9"] = "var(--color-red-9)";
+    Color["RedTransparent"] = "var(--color-red-transparent)";
+    Color["RedExtraTransparent"] = "var(--color-red-extra-transparent)";
+    Color["Orange1"] = "var(--color-orange-1)";
+    Color["Orange2"] = "var(--color-orange-2)";
+    Color["Orange3"] = "var(--color-orange-3)";
+    Color["Orange4"] = "var(--color-orange-4)";
+    Color["Orange5"] = "var(--color-orange-5)";
+    Color["Orange6"] = "var(--color-orange-6)";
+    Color["Orange7"] = "var(--color-orange-7)";
+    Color["Orange8"] = "var(--color-orange-8)";
+    Color["Orange9"] = "var(--color-orange-9)";
+    Color["OrangeTransparent"] = "var(--color-orange-transparent)";
+    Color["OrangeExtraTransparent"] = "var(--color-orange-extra-transparent)";
+    Color["Yellow1"] = "var(--color-yellow-1)";
+    Color["Yellow2"] = "var(--color-yellow-2)";
+    Color["Yellow3"] = "var(--color-yellow-3)";
+    Color["Yellow4"] = "var(--color-yellow-4)";
+    Color["Yellow5"] = "var(--color-yellow-5)";
+    Color["Yellow6"] = "var(--color-yellow-6)";
+    Color["Yellow7"] = "var(--color-yellow-7)";
+    Color["Yellow8"] = "var(--color-yellow-8)";
+    Color["Yellow9"] = "var(--color-yellow-9)";
+    Color["YellowTransparent"] = "var(--color-yellow-transparent)";
+    Color["YellowExtraTransparent"] = "var(--color-yellow-extra-transparent)";
+    Color["Green1"] = "var(--color-green-1)";
+    Color["Green2"] = "var(--color-green-2)";
+    Color["Green3"] = "var(--color-green-3)";
+    Color["Green4"] = "var(--color-green-4)";
+    Color["Green5"] = "var(--color-green-5)";
+    Color["Green6"] = "var(--color-green-6)";
+    Color["Green7"] = "var(--color-green-7)";
+    Color["Green8"] = "var(--color-green-8)";
+    Color["Green9"] = "var(--color-green-9)";
+    Color["GreenTransparent"] = "var(--color-green-transparent)";
+    Color["GreenExtraTransparent"] = "var(--color-green-extra-transparent)";
+    Color["Teal1"] = "var(--color-teal-1)";
+    Color["Teal2"] = "var(--color-teal-2)";
+    Color["Teal3"] = "var(--color-teal-3)";
+    Color["Teal4"] = "var(--color-teal-4)";
+    Color["Teal5"] = "var(--color-teal-5)";
+    Color["Teal6"] = "var(--color-teal-6)";
+    Color["Teal7"] = "var(--color-teal-7)";
+    Color["Teal8"] = "var(--color-teal-8)";
+    Color["Teal9"] = "var(--color-teal-9)";
+    Color["TealTransparent"] = "var(--color-teal-transparent)";
+    Color["TealExtraTransparent"] = "var(--color-teal-extra-transparent)";
+    Color["Blue1"] = "var(--color-blue-1)";
+    Color["Blue2"] = "var(--color-blue-2)";
+    Color["Blue3"] = "var(--color-blue-3)";
+    Color["Blue4"] = "var(--color-blue-4)";
+    Color["Blue5"] = "var(--color-blue-5)";
+    Color["Blue6"] = "var(--color-blue-6)";
+    Color["Blue7"] = "var(--color-blue-7)";
+    Color["Blue8"] = "var(--color-blue-8)";
+    Color["Blue9"] = "var(--color-blue-9)";
+    Color["BlueTransparent"] = "var(--color-blue-transparent)";
+    Color["BlueExtraTransparent"] = "var(--color-blue-extra-transparent)";
+    Color["Purple1"] = "var(--color-purple-1)";
+    Color["Purple2"] = "var(--color-purple-2)";
+    Color["Purple3"] = "var(--color-purple-3)";
+    Color["Purple4"] = "var(--color-purple-4)";
+    Color["Purple5"] = "var(--color-purple-5)";
+    Color["Purple6"] = "var(--color-purple-6)";
+    Color["Purple7"] = "var(--color-purple-7)";
+    Color["Purple8"] = "var(--color-purple-8)";
+    Color["Purple9"] = "var(--color-purple-9)";
+    Color["PurpleTransparent"] = "var(--color-purple-transparent)";
+    Color["PurpleExtraTransparent"] = "var(--color-purple-extra-transparent)";
+    Color["Magenta1"] = "var(--color-magenta-1)";
+    Color["Magenta2"] = "var(--color-magenta-2)";
+    Color["Magenta3"] = "var(--color-magenta-3)";
+    Color["Magenta4"] = "var(--color-magenta-4)";
+    Color["Magenta5"] = "var(--color-magenta-5)";
+    Color["Magenta6"] = "var(--color-magenta-6)";
+    Color["Magenta7"] = "var(--color-magenta-7)";
+    Color["Magenta8"] = "var(--color-magenta-8)";
+    Color["Magenta9"] = "var(--color-magenta-9)";
+    Color["MagentaTransparent"] = "var(--color-magenta-transparent)";
+    Color["MagentaExtraTransparent"] = "var(--color-magenta-extra-transparent)";
+    Color["Gray1"] = "var(--color-gray-1)";
+    Color["Gray2"] = "var(--color-gray-2)";
+    Color["Gray3"] = "var(--color-gray-3)";
+    Color["Gray4"] = "var(--color-gray-4)";
+    Color["Gray5"] = "var(--color-gray-5)";
+    Color["Gray6"] = "var(--color-gray-6)";
+    Color["Gray7"] = "var(--color-gray-7)";
+    Color["Gray8"] = "var(--color-gray-8)";
+    Color["Gray9"] = "var(--color-gray-9)";
+    Color["GrayTransparent"] = "var(--color-gray-transparent)";
+    Color["GrayExtraTransparent"] = "var(--color-gray-extra-transparent)";
+    // Semantic colors
+    Color["SurfacePrimary"] = "var(--color-surface-primary)";
+    Color["SurfaceSecondary"] = "var(--color-surface-secondary)";
+    Color["SurfaceTertiary"] = "var(--color-surface-tertiary)";
+    Color["TextPrimary"] = "var(--color-text-primary)";
+    Color["TextSecondary"] = "var(--color-text-secondary)";
+    Color["TextTertiary"] = "var(--color-text-tertiary)";
+    Color["ContrastBackground"] = "var(--color-contrast-background)";
+    Color["ContrastText"] = "var(--color-contrast-text)";
+    Color["Shadow"] = "var(--color-shadow)";
+    Color["Border"] = "var(--color-border)";
+})(Color || (Color = {}));
+export var FontSize;
+(function (FontSize) {
+    FontSize["XS"] = "var(--font-size-xs)";
+    FontSize["S"] = "var(--font-size-s)";
+    FontSize["M"] = "var(--font-size-m)";
+    FontSize["L"] = "var(--font-size-l)";
+    FontSize["XL"] = "var(--font-size-xl)";
+    FontSize["XXL"] = "var(--font-size-2xl)";
+    FontSize["XXXL"] = "var(--font-size-3xl)";
+    FontSize["XXXXL"] = "var(--font-size-4xl)";
+})(FontSize || (FontSize = {}));
+export var FontWeight;
+(function (FontWeight) {
+    FontWeight["Light"] = "var(--font-weight-light)";
+    FontWeight["Normal"] = "var(--font-weight-normal)";
+    FontWeight["Semibold"] = "var(--font-weight-semibold)";
+    FontWeight["Bold"] = "var(--font-weight-bold)";
+    FontWeight["Black"] = "var(--font-weight-black)";
+})(FontWeight || (FontWeight = {}));
+export var FontFamily;
+(function (FontFamily) {
+    FontFamily["Body"] = "var(--font-family-body)";
+    FontFamily["Heading"] = "var(--font-family-heading)";
+    FontFamily["Mono"] = "var(--font-family-mono)";
+})(FontFamily || (FontFamily = {}));
+export var Space;
+(function (Space) {
+    Space["None"] = "var(--space-none)";
+    Space["XXXS"] = "var(--space-3xs)";
+    Space["XXS"] = "var(--space-2xs)";
+    Space["XS"] = "var(--space-xs)";
+    Space["S"] = "var(--space-s)";
+    Space["M"] = "var(--space-m)";
+    Space["L"] = "var(--space-l)";
+    Space["XL"] = "var(--space-xl)";
+    Space["XXL"] = "var(--space-2xl)";
+    Space["XXXL"] = "var(--space-3xl)";
+    Space["BodyX"] = "var(--body-x)";
+    Space["BodyY"] = "var(--body-y)";
+})(Space || (Space = {}));
+export var Radius;
+(function (Radius) {
+    Radius["None"] = "var(--radius-none)";
+    Radius["S"] = "var(--radius-s)";
+    Radius["M"] = "var(--radius-m)";
+    Radius["L"] = "var(--radius-l)";
+    Radius["XL"] = "var(--radius-xl)";
+    Radius["XXL"] = "var(--radius-2xl)";
+    Radius["Full"] = "var(--radius-full)";
+})(Radius || (Radius = {}));
+export var Shadow;
+(function (Shadow) {
+    Shadow["None"] = "var(--shadow-none)";
+    Shadow["S"] = "var(--shadow-s)";
+    Shadow["M"] = "var(--shadow-m)";
+    Shadow["L"] = "var(--shadow-l)";
+    Shadow["XL"] = "var(--shadow-xl)";
+})(Shadow || (Shadow = {}));
+export var BorderWidth;
+(function (BorderWidth) {
+    BorderWidth["None"] = "var(--border-none)";
+    BorderWidth["S"] = "var(--border-s)";
+    BorderWidth["M"] = "var(--border-m)";
+    BorderWidth["L"] = "var(--border-l)";
+    BorderWidth["XL"] = "var(--border-xl)";
+})(BorderWidth || (BorderWidth = {}));
+export var EasingFunction;
+(function (EasingFunction) {
+    EasingFunction["Default"] = "var(--ease-default)";
+    EasingFunction["Out"] = "var(--ease-out)";
+    EasingFunction["In"] = "var(--ease-in)";
+    EasingFunction["Both"] = "var(--ease-both)";
+    EasingFunction["BothSubtle"] = "var(--ease-both-subtle)";
+    EasingFunction["Spring"] = "var(--ease-spring)";
+})(EasingFunction || (EasingFunction = {}));
+export var Duration;
+(function (Duration) {
+    Duration["S"] = "var(--duration-s)";
+    Duration["M"] = "var(--duration-m)";
+    Duration["L"] = "var(--duration-l)";
+    Duration["XL"] = "var(--duration-xl)";
+})(Duration || (Duration = {}));