@mobielnl/elements 0.4.0 → 0.6.1

package/README.md

@@ -85,7 +85,7 @@ const productResultsClassNames: ProductResultsClassNames = {
   propositionCard: {
     title: "text-5xl font-extrabold text-secondary",
     pricingSection: {
-      monthlyFeeValue: "text-red-500",
+      monthlyFeeValue: "text-danger",
     },
   },
 };
@@ -131,7 +131,7 @@ export default function Example() {
         propositionCard: {
           title: "text-5xl font-extrabold text-secondary",
           pricingSection: {
-            monthlyFeeValue: "text-red-500",
+            monthlyFeeValue: "text-danger",
           },
         },
       };
@@ -171,139 +171,149 @@ Our compiled stylesheet uses HeroUI-compatible CSS custom properties.
 - Copy the token set and set your own theme. Color values are HSL triplets (h s% l%).
 - You can scope themes per element or toggle dark mode using `data-theme`.
 
+### Default theme 
+
+The default theme is the [default HeroUI theme](https://www.heroui.com/themes).
+
 ```css
 .mobielnl-elements {
-  --mobielnl-background: 0 0% 100%;
-  --mobielnl-foreground: 232 68% 21%;
-
-  /* Default (Neutral) */
-  --mobielnl-default-50: 0 0% 98%;
-  --mobielnl-default-100: 0 0% 96%;
-  --mobielnl-default-200: 0 0% 89%;
-  --mobielnl-default-300: 0 0% 82%;
-  --mobielnl-default-400: 0 0% 65%;
-  --mobielnl-default-500: 0 0% 52%;
-  --mobielnl-default-600: 0 0% 44%;
-  --mobielnl-default-700: 0 0% 34%;
-  --mobielnl-default-800: 0 0% 25%;
-  --mobielnl-default-900: 0 0% 13%;
-  --mobielnl-default: 0 0% 52%;
-  --mobielnl-default-foreground: 232 68% 21%;
-
-  /* Primary (Blue) */
-  --mobielnl-primary-50: 219 68% 95%;
-  --mobielnl-primary-100: 218 71% 93%;
-  --mobielnl-primary-200: 213 97% 87%;
-  --mobielnl-primary-300: 212 96% 78%;
-  --mobielnl-primary-400: 213 95% 68%;
-  --mobielnl-primary-500: 218 89% 61%;
-  --mobielnl-primary-600: 223 72% 49%;
-  --mobielnl-primary-700: 228 70% 38%;
-  --mobielnl-primary-800: 231 69% 33%;
-  --mobielnl-primary-900: 232 68% 21%;
-  --mobielnl-primary: 231 69% 33%;
-  --mobielnl-primary-foreground: 0 0% 100%;
-
-  /* Secondary (Orange) */
-  --mobielnl-secondary-50: 37 100% 96%;
-  --mobielnl-secondary-100: 39 100% 92%;
-  --mobielnl-secondary-200: 36 100% 83%;
-  --mobielnl-secondary-300: 35 100% 72%;
-  --mobielnl-secondary-400: 31 99% 61%;
-  --mobielnl-secondary-500: 29 98% 51%;
-  --mobielnl-secondary-600: 25 93% 48%;
-  --mobielnl-secondary-700: 22 91% 40%;
-  --mobielnl-secondary-800: 19 81% 34%;
-  --mobielnl-secondary-900: 21 82% 27%;
-  --mobielnl-secondary: 27 97% 49%;
-  --mobielnl-secondary-foreground: 0 0% 100%;
-
-  /* Success */
-  --mobielnl-success-50: 92 60% 95%;
-  --mobielnl-success-100: 93 60% 89%;
-  --mobielnl-success-200: 93 58% 80%;
-  --mobielnl-success-300: 94 56% 67%;
-  --mobielnl-success-400: 95 52% 55%;
-  --mobielnl-success-500: 96 53% 42%;
-  --mobielnl-success-600: 97 56% 35%;
-  --mobielnl-success-700: 98 51% 27%;
-  --mobielnl-success-800: 99 45% 23%;
-  --mobielnl-success-900: 100 40% 20%;
-  --mobielnl-success: 97 56% 35%;
-  --mobielnl-success-foreground: 0 0% 100%;
-
-  /* Warning */
-  --mobielnl-warning-50: 54 100% 96%;
-  --mobielnl-warning-100: 55 93% 89%;
-  --mobielnl-warning-200: 55 95% 77%;
-  --mobielnl-warning-300: 53 94% 65%;
-  --mobielnl-warning-400: 50 94% 56%;
-  --mobielnl-warning-500: 44 90% 53%;
-  --mobielnl-warning-600: 39 93% 44%;
-  --mobielnl-warning-700: 33 88% 37%;
-  --mobielnl-warning-800: 29 80% 31%;
-  --mobielnl-warning-900: 28 76% 26%;
-  --mobielnl-warning: 39 93% 44%;
-  --mobielnl-warning-foreground: 0 0% 100%;
-
-  /* Danger */
-  --mobielnl-danger-50: 0 71% 97%;
-  --mobielnl-danger-100: 0 80% 94%;
-  --mobielnl-danger-200: 0 85% 89%;
-  --mobielnl-danger-300: 0 83% 82%;
-  --mobielnl-danger-400: 0 80% 71%;
-  --mobielnl-danger-500: 0 74% 60%;
-  --mobielnl-danger-600: 0 63% 51%;
-  --mobielnl-danger-700: 0 65% 42%;
-  --mobielnl-danger-800: 0 62% 35%;
-  --mobielnl-danger-900: 0 55% 31%;
-  --mobielnl-danger: 0 63% 51%;
-  --mobielnl-danger-foreground: 0 0% 100%;
-
-  /* Content */
-  --mobielnl-content1: 0 0% 100%;
-  --mobielnl-content1-foreground: 232 68% 21%;
-  --mobielnl-content2: 230 75% 98%;
-  --mobielnl-content2-foreground: 232 68% 21%;
-  --mobielnl-content3: 220 67% 96%;
-  --mobielnl-content3-foreground: 232 68% 21%;
-  --mobielnl-content4: 219 68% 95%;
-  --mobielnl-content4-foreground: 232 68% 21%;
-
-  /* Radius */
-  --mobielnl-radius-small: 8px;
-  --mobielnl-radius-medium: 12px;
-  --mobielnl-radius-large: 16px;
-
-  /* Border Width */
-  --mobielnl-border-width-small: 1px;
-  --mobielnl-border-width-medium: 2px;
-  --mobielnl-border-width-large: 3px;
-
-  /* Box Shadow */
-  --mobielnl-box-shadow-small:
-    0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px
-    rgb(0 0 0 / 0.3);
-  --mobielnl-box-shadow-medium:
-    0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px
-    rgb(0 0 0 / 0.3);
-  --mobielnl-box-shadow-large:
-    0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px
-    rgb(0 0 0 / 0.3);
-
-  /* Other */
-  --mobielnl-hover-opacity: 0.8;
-  --mobielnl-focus: 222 84% 54%;
-  --mobielnl-disabled-opacity: 0.5;
-  --mobielnl-divider: 218 18% 39%;
-  --mobielnl-overlay: 0 0% 0%;
+  --elements-background: 0 0% 100%;
+  --elements-overlay: 0 0% 0%;
+
+  --elements-foreground-50: 0 0% 98.04%;
+  --elements-foreground-100: 240 4.76% 95.88%;
+  --elements-foreground-200: 240 5.88% 90%;
+  --elements-foreground-300: 240 4.88% 83.92%;
+  --elements-foreground-400: 240 5.03% 64.9%;
+  --elements-foreground-500: 240 3.83% 46.08%;
+  --elements-foreground-600: 240 5.2% 33.92%;
+  --elements-foreground-700: 240 5.26% 26.08%;
+  --elements-foreground-800: 240 3.7% 15.88%;
+  --elements-foreground-900: 240 5.88% 10%;
+  --elements-foreground: 201.81999999999994 24.44% 8.82%;
+
+  --elements-content1: 0 0% 100%;
+  --elements-content1-foreground: 201.81999999999994 24.44% 8.82%;
+  --elements-content2: 240 4.76% 95.88%;
+  --elements-content2-foreground: 240 3.7% 15.88%;
+  --elements-content3: 240 5.88% 90%;
+  --elements-content3-foreground: 240 5.26% 26.08%;
+  --elements-content4: 240 4.88% 83.92%;
+  --elements-content4-foreground: 240 5.2% 33.92%;
+
+  --elements-default-50: 0 0% 98.04%;
+  --elements-default-100: 240 4.76% 95.88%;
+  --elements-default-200: 240 5.88% 90%;
+  --elements-default-300: 240 4.88% 83.92%;
+  --elements-default-400: 240 5.03% 64.9%;
+  --elements-default-500: 240 3.83% 46.08%;
+  --elements-default-600: 240 5.2% 33.92%;
+  --elements-default-700: 240 5.26% 26.08%;
+  --elements-default-800: 240 3.7% 15.88%;
+  --elements-default-900: 240 5.88% 10%;
+  --elements-default-foreground: 0 0% 0%;
+  --elements-default: 240 4.88% 83.92%;
+
+  --elements-primary-50: 212.5 92.31% 94.9%;
+  --elements-primary-100: 211.84000000000003 92.45% 89.61%;
+  --elements-primary-200: 211.84000000000003 92.45% 79.22%;
+  --elements-primary-300: 212.24 92.45% 68.82%;
+  --elements-primary-400: 212.14 92.45% 58.43%;
+  --elements-primary-500: 212.01999999999998 100% 46.67%;
+  --elements-primary-600: 212.14 100% 38.43%;
+  --elements-primary-700: 212.24 100% 28.82%;
+  --elements-primary-800: 211.84000000000003 100% 19.22%;
+  --elements-primary-900: 211.84000000000003 100% 9.61%;
+  --elements-primary-foreground: 0 0% 100%;
+  --elements-primary: 212.01999999999998 100% 46.67%;
+
+  --elements-secondary-50: 270 61.54% 94.9%;
+  --elements-secondary-100: 270 59.26% 89.41%;
+  --elements-secondary-200: 270 59.26% 78.82%;
+  --elements-secondary-300: 270 59.26% 68.24%;
+  --elements-secondary-400: 270 59.26% 57.65%;
+  --elements-secondary-500: 270 66.67% 47.06%;
+  --elements-secondary-600: 270 66.67% 37.65%;
+  --elements-secondary-700: 270 66.67% 28.24%;
+  --elements-secondary-800: 270 66.67% 18.82%;
+  --elements-secondary-900: 270 66.67% 9.41%;
+  --elements-secondary-foreground: 0 0% 100%;
+  --elements-secondary: 270 66.67% 47.06%;
+
+  --elements-success-50: 146.66999999999996 64.29% 94.51%;
+  --elements-success-100: 145.71000000000004 61.4% 88.82%;
+  --elements-success-200: 146.2 61.74% 77.45%;
+  --elements-success-300: 145.78999999999996 62.57% 66.47%;
+  --elements-success-400: 146.01 62.45% 55.1%;
+  --elements-success-500: 145.96000000000004 79.46% 43.92%;
+  --elements-success-600: 146.01 79.89% 35.1%;
+  --elements-success-700: 145.78999999999996 79.26% 26.47%;
+  --elements-success-800: 146.2 79.78% 17.45%;
+  --elements-success-900: 145.71000000000004 77.78% 8.82%;
+  --elements-success-foreground: 0 0% 0%;
+  --elements-success: 145.96000000000004 79.46% 43.92%;
+
+  --elements-warning-50: 54.55000000000001 91.67% 95.29%;
+  --elements-warning-100: 37.139999999999986 91.3% 90.98%;
+  --elements-warning-200: 37.139999999999986 91.3% 81.96%;
+  --elements-warning-300: 36.95999999999998 91.24% 73.14%;
+  --elements-warning-400: 37.00999999999999 91.26% 64.12%;
+  --elements-warning-500: 37.02999999999997 91.27% 55.1%;
+  --elements-warning-600: 37.00999999999999 74.22% 44.12%;
+  --elements-warning-700: 36.95999999999998 73.96% 33.14%;
+  --elements-warning-800: 37.139999999999986 75% 21.96%;
+  --elements-warning-900: 37.139999999999986 75% 10.98%;
+  --elements-warning-foreground: 0 0% 0%;
+  --elements-warning: 37.02999999999997 91.27% 55.1%;
+
+  --elements-danger-50: 339.13 92% 95.1%;
+  --elements-danger-100: 340 91.84% 90.39%;
+  --elements-danger-200: 339.3299999999999 90% 80.39%;
+  --elements-danger-300: 339.11 90.6% 70.78%;
+  --elements-danger-400: 339 90% 60.78%;
+  --elements-danger-500: 339.20000000000005 90.36% 51.18%;
+  --elements-danger-600: 339 86.54% 40.78%;
+  --elements-danger-700: 339.11 85.99% 30.78%;
+  --elements-danger-800: 339.3299999999999 86.54% 20.39%;
+  --elements-danger-900: 340 84.91% 10.39%;
+  --elements-danger-foreground: 0 0% 100%;
+  --elements-danger: 339.20000000000005 90.36% 51.18%;
+
+  --elements-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  --elements-font-size-tiny: 0.75rem;
+  --elements-font-size-small: 0.875rem;
+  --elements-font-size-medium: 1rem;
+  --elements-font-size-large: 1.125rem;
+
+  --elements-line-height-tiny: 1rem;
+  --elements-line-height-small: 1.25rem;
+  --elements-line-height-medium: 1.5rem;
+  --elements-line-height-large: 1.75rem;
+
+  --elements-radius-small: 8px;
+  --elements-radius-medium: 12px;
+  --elements-radius-large: 14px;
+
+  --elements-divider: 0 0% 6.67%;
+  --elements-divider-weight: 1px;
+  --elements-border-width-small: 1px;
+  --elements-border-width-medium: 2px;
+  --elements-border-width-large: 3px;
+
+  --elements-focus: 212.01999999999998 100% 46.67%;
+  --elements-hover-opacity: .8;
+  --elements-disabled-opacity: .5;
+
+  --elements-box-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+  --elements-box-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
+  --elements-box-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
 }
 
 /* Optional: dark theme overrides on the wrapper */
 [data-theme="dark"].mobielnl-elements,
 .mobielnl-elements[data-theme="dark"] {
-  --mobielnl-background: 0 0% 0%;
-  --mobielnl-foreground: 0 0% 94%;
+  --elements-background: 0 0% 0%;
 }
 ```