@massimo-cassandro/minimo 0.1.12 → 0.2.1

package/src/custom-properties-default.css

@@ -1,327 +1,222 @@
-/* TODO switch to jit */
-/* TODO ricontrollare i colori, se possibile sganciarli da openprops nel defaults */
-/* vedi https://postcss.org/docs/writing-a-postcss-plugin */
-/* https://github.com/GoogleChromeLabs/postcss-jit-props */
-
-
 :root {
-
-  /* figma */
-  --body-bg-color: var(--stone-0);
-  --text-color: #000;
-  --footer-bg: #282c35;
-  --footer-fg: #fff;
-  --footer-link: var(--yellow-5);
-  --link-color: var(--primary);
-  --primary: #203c6e;
-  --primary-fg: #fff;
-  --secondary: #a3384e;
-  --secondary-fg: var(--body-bg-color);
-  --radius: 0.38rem;
-  /* end figma */
-
-  /* project */
-  /* end project */
-
-  --container-max-width: 90rem;
-
-  --font-family: 'Open Sans Variable', sans-serif;
-  --font-family-mono: 'Monaspace Neon Var', 'Monaspace Neon', 'Aptos Mono', 'Roboto Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Andale Mono', 'Courier New', monospace;
-
-  /* --font-weight-xxlight: 100; */
-  /* --font-weight-xlight: 200; */
-  --font-weight-light: 300;
-  --font-weight-regular: 400;
-  --font-weight-semibold: 550;
-  --font-weight-bold: 650;
-  --font-weight-xbold: 800;
-
+  --accent-base: #567d0d;
+  --accent-on-base: #fff;
+  --alert-border-radius: var(--radius-md);
+  --alert-drop-shadow: 0 0 .5rem 0 oklch(0% 0 0 / .5);
+  --body-background-color: #fff;
+  --body-text: var(--text-color);
+  --btn-border-radius: var(--form-control-border-radius);
+  --btn-border-width: var(--form-control-border-width);
+  --btn-close-active-background-color: var(--link-active-background-color);
+  --btn-close-active-icon-color: var(--link-active-color);
+  --btn-close-background-color: var(--body-background-color);
+  --btn-close-border-color: var(--btn-close-icon-color);
+  --btn-close-border-radius: 3.125rem;
+  --btn-close-border-width: .125rem;
+  --btn-close-focus-outline-color: var(--link-focus-outline-color);
+  --btn-close-focus-outline-offset: .125rem;
+  --btn-close-focus-outline-width: .125rem;
+  --btn-close-hover-background-color: var(--btn-close-icon-color);
+  --btn-close-hover-icon-color: var(--btn-close-background-color);
+  --btn-close-icon-bar-size: .125rem;
+  --btn-close-icon-color: var(--text-color);
+  --btn-close-padding: .1875rem;
+  --btn-close-size: 1.5rem;
+  --btn-disabled-opacity: var(--form-control-disabled-opacity);
+  --btn-focus-outline-width: var(--form-control-focus-outline-width);
+  --btn-font-size: var(--form-control-font-size);
+  --btn-font-style: var(--form-control-font-style);
+  --btn-font-weight: var(--form-control-font-weight);
+  --btn-hollow-border-width: var(--btn-border-width);
+  --btn-lg-focus-outline-width: .25rem;
+  --btn-lg-font-size: var(--font-size-lg);
+  --btn-lg-padding-block: var(--size-base);
+  --btn-lg-padding-inline: var(--size-md);
+  --btn-md-focus-outline-width: .1875rem;
+  --btn-md-font-size: var(--font-size-md);
+  --btn-md-padding-block: var(--size-xs);
+  --btn-md-padding-inline: var(--size-sm);
+  --btn-padding-block: var(--size-xs);
+  --btn-padding-inline: var(--size-base);
+  --btn-primary-active-background-color: color-mix(in srgb, var(--btn-primary-background-color) 60%, #000);
+  --btn-primary-active-border-color: var(--btn-primary-active-background-color);
+  --btn-primary-active-color: var(--btn-primary-color);
+  --btn-primary-background-color: var(--primary-base);
+  --btn-primary-border-color: var(--btn-primary-background-color);
+  --btn-primary-color: var(--primary-on-base);
+  --btn-primary-focus-outline-color: color-mix(in srgb, var(--btn-primary-background-color) 60%, transparent);
+  --btn-primary-hollow-background-color: var(--btn-primary-color);
+  --btn-primary-hollow-color: var(--btn-primary-background-color);
+  --btn-primary-hollow-hover-background-color: color-mix(in srgb, var(--btn-primary-hollow-color) 20%, transparent);
+  --btn-primary-hollow-hover-color: var(--btn-primary-hollow-color);
+  --btn-primary-hover-background-color: var(--btn-primary-color);
+  --btn-primary-hover-border-color: var(--btn-primary-hover-color);
+  --btn-primary-hover-color: var(--btn-primary-background-color);
+  --btn-sm-focus-outline-width: .125rem;
+  --btn-sm-font-size: var(--font-size-sm);
+  --btn-sm-padding-block: var(--size-xxs);
+  --btn-sm-padding-inline: var(--size-xs);
+  --btn-xl-focus-outline-width: .375rem;
+  --btn-xl-font-size: var(--font-size-xl);
+  --btn-xl-padding-block: var(--size-md);
+  --btn-xl-padding-inline: var(--size-xl);
+  --btn-xs-focus-outline-width: .0625rem;
+  --btn-xs-font-size: var(--font-size-xs);
+  --btn-xs-padding-block: var(--size-xxs);
+  --btn-xs-padding-inline: var(--size-xxs);
   --flex-grid-gap: 1.5rem;
-
-  --gray-xlight: var(--gray-2);
-  --gray-light: var(--gray-4);
-  --gray-medium: var(--gray-6);
-  --gray-dark: var(--gray-8);
-
-
-  /* TODO rifare come modular scale */
-  /* Fluid Type Scale Calculator - Generate font size variables for a fluid type scale <https://www.fluid-type-scale.com/> */
-  /* Creating a Fluid Type Scale with CSS Clamp | Aleksandr Hovhannisyan <https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/> */
-
-  /* vedi anche */
-  /* Modular scale: Every Layout <https://every-layout.dev/rudiments/modular-scale/> */
-  /* Consistent, Fluidly Scaling Type and Spacing | CSS-Tricks <https://css-tricks.com/consistent-fluidly-scaling-type-and-spacing/> */
-  /* Modularscale <https://www.modularscale.com/> */
-  /* Proportio.app <https://proportio.app/> */
-  /* Grid lover (vertcal Rythm) <https://gridlover.net/try>   */
-  /* Fluid Grid Calculator <https://utopia.fyi/grid/calculator/> */
-  /* Fluid Space Calculator <https://utopia.fyi/space/calculator> */
-  /* Modern fluid typography editor <https://modern-fluid-typography.vercel.app/> */
-  /* Fluid type scale calculator | Utopia <https://utopia.fyi/type/calculator/> */
-
-
-
-  /*
-
-  @support ...
-  @function --negate(--value) {
-    result: calc(var(--value) * -1);
-  }
-
-  div {
-  --gap: 1em;
-  margin-top: --negate(var(--gap));
-  }
-  */
-
-  /*
-  https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjY0cmVtIiwibWF4V2lkdGgiOiI5MHJlbSIsIm1pbkZvbnRTaXplIjoiMS4wNXJlbSIsIm1heEZvbnRTaXplIjoiMS4zcmVtIn0%3D
-  */
-  --font-size-xxs: clamp(.6rem, .3538rem + .3846vw, .7rem);
-  --font-size-xs: clamp(.7rem, .4538rem + .3846vw, .8rem);
-  --font-size-sm: clamp(.8rem, .5538rem + .3846vw, .9rem);
+  --font-family: sans-serif;
+  --font-family-mono: 'Monaspace Neon Var', 'Monaspace Neon', 'Aptos Mono', 'Roboto Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Andale Mono', 'Courier New', monospace;
+  --font-line-height-base: 1.5;
+  --font-size-2xl: clamp(2rem, .7692rem + 1.9231vw, 2.5rem);
+  --font-size-3xl: clamp(2.2rem, .2308rem + 3.0769vw, 3rem);
   --font-size-base: clamp(.9rem, .6538rem + .3846vw, 1rem);
-  --font-size-lead: clamp(1rem, 0.6923rem + 0.4808vw, 1.125rem);
-  --font-size-md: clamp(1.05rem, .6808rem + .5769vw, 1.2rem);
   --font-size-lg: clamp(1.2rem, .7077rem + .7692vw, 1.4rem);
+  --font-size-md: clamp(1.05rem, .6808rem + .5769vw, 1.2rem);
+  --font-size-sm: clamp(.8rem, .5538rem + .3846vw, .9rem);
   --font-size-xl: clamp(1.6rem, 1.1077rem + .7692vw, 1.8rem);
-  --font-size-2xl: clamp(2rem, .7692rem + 1.9231vw, 2.5rem);
-  --font-size-3xl: clamp(2.2rem, .2308rem + 3.0769vw, 3rem);
-
+  --font-size-xs: clamp(.7rem, .4538rem + .3846vw, .8rem);
+  --font-size-xxs: clamp(.6rem, .3538rem + .3846vw, .7rem);
   --font-style-base: normal;
-
-  /* Rhythm in Web Typography | Better Web Type <https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/> */
-  /* The good line-height <https://www.thegoodlineheight.com/> */
-  --line-height-base: 1.5;
-
-  --headings-text-align: start;
-  --text-muted-color: var(--stone-7);
-  --text-dim-color: var(--gray-8);
-  --link-visited-color: var(--camo-9);
-  --link-active-color: var(--sand-3);
-  --link-active-bg-color: var(--sand-3);
-
-  --form-group-padding-block: 0 var(--spacing-base);
-  --form-text-color: var(--text-color);
-  --form-bg-color: var(--gray-0);
-  --form-input-group-bg-color: var(--gray-1);
-  --form-border-color: var(--gray-6);
-  --form-disabled-bg-color: var(--gray-3);
-  --form-disabled-opacity: .3;
-  --form-placeholder-color: var(--stone-8);
-  --form-required-flag-color: var(--red-8);
-  --form-required-flag-content: '\002A';
-  --form-fieldset-border-width: 1px;
-  --form-legend-bg-color: var(--stone-3);
-  --form-legend-color: #333; /*  var(--text-color); */
-
-  --form-btn-border-radius: var(--radius-xxs);
-  --form-btn-padding-y: var(--spacing-xxs);
-  --form-btn-padding-x: var(--spacing-xs);
-  --form-btn-font-size: clamp(.85rem, 6vw, 1rem);
-  --form-btn-sm-font-size: clamp(.75rem, 6vw, .9rem);
-  --form-btn-sm-padding-x: .8rem;
-  --form-btn-sm-padding-y: .1rem;
-  --form-btn-focus-color: hsl(205 69% 45% / .508);
-  --form-btn-outline-width: 4px;
-
-  /* TODO importazione automatica SVG (NB problemi con svgo) */
-  /* url('./css/forms/select-indicator.svg?cssInline'); */
-  --form-select-indicator: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22rgb(5%2C%2048%2C%2056)%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m2%205%206%206%206-6%22%2F%3E%3C%2Fsvg%3E');
-  --form-font-style: normal;
-  --form-font-weight: var(--font-weight-regular);
-
-  --btn-border-width: 1px;
-  --btn-o-border-width: 2px;
-  --btn-font-style: var(--form-font-style);
-  --btn-font-weight: var(--form-font-weight);
-
-
-  --btn-primary-bg-color: linear-gradient(45deg, var(--primary), color-mix(in srgb, var(--primary) 95%, #000));
-  --btn-primary-fg-color: var(--primary-fg);
-  --btn-primary-border-color: var(--primary);
-  --btn-primary-hover-bg-color: color-mix(in srgb, var(--primary) 90%, #000);
-  --btn-primary-hover-fg-color: var(--btn-primary-fg-color);
-  --btn-primary-hover-border-color: var(--btn-primary-border-color);
-  --btn-primary-active-bg-color: color-mix(in srgb, var(--primary) 90%, #fff);
-  --btn-primary-active-fg-color: var(--btn-primary-fg-color);
-  --btn-primary-active-border-color: var(--btn-primary-active-bg-color);
-  --btn-primary-focus-outline-color: color-mix(in srgb, var(--btn-primary-border-color) 25%, transparent);
-
-  --btn-secondary-bg-color: var(--secondary);
-  --btn-secondary-fg-color: var(--secondary-fg);
-  --btn-secondary-border-color: var(--secondary);
-  --btn-secondary-hover-bg-color: color-mix(in srgb, var(--btn-secondary-bg-color) 70%, #000);
-  --btn-secondary-hover-fg-color: var(--btn-secondary-fg-color);
-  --btn-secondary-hover-border-color: var(--btn-secondary-hover-bg-color);
-  --btn-secondary-active-bg-color: var(--btn-secondary-hover-fg-color);
-  --btn-secondary-active-fg-color: var(--btn-secondary-hover-bg-color);
-  --btn-secondary-active-border-color: var(--btn-secondary-active-bg-color);
-  --btn-secondary-focus-outline-color: color-mix(in srgb, var(--btn-secondary-border-color) 50%, transparent);
-
-
-  --btn-o-primary-bg-color: var(--primary-fg);
-  --btn-o-primary-fg-color: var(--primary);
-  --btn-o-primary-border-color: var(--btn-o-primary-fg-color);
-  --btn-o-primary-hover-bg-color: color-mix(in srgb, var(--primary) 10%, transparent);
-  --btn-o-primary-hover-fg-color: var(--btn-o-primary-fg-color);
-  --btn-o-primary-hover-border-color: var(--btn-o-primary-border-color);
-  --btn-o-primary-active-bg-color: var(--btn-o-primary-fg-color);
-  --btn-o-primary-active-fg-color: var(--btn-o-primary-bg-color);
-  --btn-o-primary-active-border-color: var(--btn-o-primary-border-color);
-  --btn-o-primary-focus-outline-color: color-mix(in srgb, var(--primary) 20%, transparent);
-
-
-  --btn-o-secondary-bg-color: color-mix(in srgb, var(--secondary) 5%, transparent);
-  --btn-o-secondary-fg-color: var(--secondary);
-  --btn-o-secondary-border-color: var(--secondary);
-  --btn-o-secondary-hover-bg-color: color-mix(in srgb, var(--secondary) 15%, #fff);
-  --btn-o-secondary-hover-fg-color: var(--secondary);
-  --btn-o-secondary-hover-border-color: var(--btn-o-secondary-border-color);
-  --btn-o-secondary-active-bg-color: var(--secondary);
-  --btn-o-secondary-active-fg-color: var(--secondary-fg);
-  --btn-o-secondary-active-border-color: var(--btn-o-secondary-border-color);
-  --btn-o-secondary-focus-outline-color: color-mix(in srgb, var(--secondary) 50%, #fff);
-
-  /* btn-close */
-  --btn-close-size: 1.5rem;
-  --btn-close-icon-bar-size: 2px;
-  --btn-close-icon-color: var(--text-color);
-
-  /* senza sfondo */
-  /*
-  --btn-close-icon-hover-color: var(--accent);
-  --btn-close-border-radius: 50%;
-  --btn-close-border: none;
-  --btn-close-padding: 0;
-  --btn-close-background: transparent;
-  --btn-close-background-hover: transparent;
-  --btn-close-background-active: transparent;
-  */
-
-  /* con sfondo */
-  --btn-close-border-width: 3px;
-  --btn-close-border-color: var(--btn-close-icon-color);
-  --btn-close-border-radius: 50%;
-  --btn-close-padding: 3px;
-  --btn-close-background: var(--body-bg-color);
-  --btn-close-hover-background: var(--btn-close-icon-color);
-  --btn-close-icon-hover-color: var(--btn-close-background);
-  --btn-close-active-background: var(--accent);
-  --btn-close-icon-active-color: var(--accent-fg);
-  --btn-close-focus-outline-width: var(--form-btn-outline-width);
-  --btn-close-focus-outline-color: color-mix(in srgb, var(--accent) 50%, transparent);
-  /* end btn-close */
-
-  --spacing-xxs: .25rem;
-  --spacing-xs: .5rem;
-  --spacing-sm: .75rem;
-  --spacing-base: 1rem;
-  --spacing-md: 1.2rem;
-  --spacing-lg: 1.5rem;
-  --spacing-xl: 2rem;
-  --spacing-2xl: 3rem;
-  --spacing-3xl: 4rem;
-
-
-  --radius-xxs: var(--spacing-xxs);
-  --radius-xs: var(--spacing-xs);
-  --radius-sm: var(--spacing-sm);
-  --radius-base: var(--spacing-base);
-  --radius-md: var(--spacing-md);
-  --radius-lg: var(--spacing-lg);
-  --radius-xl: var(--spacing-xl);
-  --radius-pill: 999rem;
-
-  --spinner-color: var(--text-color);
-  --spinner-size: 3rem;
-  --spinner-stroke: .4rem; /* dove utilizzato */
-  --spinner-overlay-color: color-mix(in srgb, var(--text-color) 20%, transparent);
-
-  --alert-border-radius: var(--radius-md);
-  --alert-box-shadow: var(--box-shadow-base);
-
-  --status-success-color: #046d19;
-  --status-success-border-color: var(--status-success-color);
-  --status-success-fg-color: #fff;
-
-  --status-danger-color: #c00;
+  --font-weight-bold: 700;
+  --font-weight-light: 300;
+  --font-weight-medium: 500;
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --font-weight-xbold: 900;
+  --font-weight-xlight: 200;
+  --font-weight-xxlight: 100;
+  --form-control-background-color: var(--body-background-color);
+  --form-control-border-color: #666;
+  --form-control-border-radius: var(--radius-xxs);
+  --form-control-border-width: .0625rem;
+  --form-control-disabled-background-color: #999;
+  --form-control-disabled-opacity: .3;
+  --form-control-focus-color: hsl(205 69% 45% / .508);
+  --form-control-focus-outline-width: .25rem;
+  --form-control-font-size: var(--font-size-base);
+  --form-control-font-style: normal;
+  --form-control-font-weight: var(--font-weight-regular);
+  --form-control-lg-font-size: var(--font-size-lg);
+  --form-control-lg-padding-block: var(--size-base);
+  --form-control-lg-padding-inline: var(--size-md);
+  --form-control-md-font-size: var(--font-size-md);
+  --form-control-md-padding-block: var(--size-xs);
+  --form-control-md-padding-inline: var(--size-sm);
+  --form-control-padding-block: var(--size-xs);
+  --form-control-padding-inline: var(--size-sm);
+  --form-control-placeholder-color: #666;
+  --form-control-placeholder-font-size: var(--form-control-font-size);
+  --form-control-placeholder-font-style: italic;
+  --form-control-placeholder-opacity: .8;
+  --form-control-required-flag-color: #c00;
+  --form-control-required-flag-content: '\002A';
+  --form-control-select-trigger-icon: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22rgb(5%2C%2048%2C%2056)%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m2%205%206%206%206-6%22%2F%3E%3C%2Fsvg%3E');
+  --form-control-sm-font-size: var(--font-size-sm);
+  --form-control-sm-padding-block: var(--size-xxs);
+  --form-control-sm-padding-inline: var(--size-xs);
+  --form-control-text-color: var(--text-color);
+  --form-control-xl-font-size: var(--font-size-xl);
+  --form-control-xl-padding-block: var(--size-md);
+  --form-control-xl-padding-inline: var(--size-xl);
+  --form-control-xs-font-size: var(--font-size-xs);
+  --form-control-xs-padding-block: var(--size-xxs);
+  --form-control-xs-padding-inline: var(--size-xxs);
+  --form-end-margin-block-end: var(--size-base);
+  --form-end-margin-block-start: var(--size-base);
+  --form-fieldset-border-width: .0625rem;
+  --form-fieldset-legend-background-color: transparent;
+  --form-fieldset-legend-color: var(--text-color);
+  --form-group-padding-block: 0 var(--size-base);
+  --form-input-group-background-color: transparent;
+  --form-label-color: var(--text-color);
+  --form-label-font-size: var(--font-size-sm);
+  --form-label-font-weight: var(--font-weight-semibold);
+  --form-user-info-color: var(--text-muted);
+  --form-user-info-font-size: var(--font-size-xs);
+  --grid-cols: 3;
+  --grid-min-col-width: 6rem;
+  --headings-color: var(--text-color);
+  --headings-font-weight: var(--font-weight-semibold);
+  --headings-h1-font-size: var(--font-size-2xl);
+  --headings-h1-font-weight: var(--headings-font-weight);
+  --headings-h2-font-size: var(--font-size-xl);
+  --headings-h3-font-size: var(--font-size-lg);
+  --headings-h4-font-size: var(--font-size-md);
+  --headings-text-align: inherit;
+  --layout-container-max-width: 80rem;
+  --link-active-background-color: transparent;
+  --link-active-color: #51054c;
+  --link-color: #0d12ae;
+  --link-focus-outline-color: var(--link-color);
+  --link-focus-outline-width: .125rem;
+  --link-visited-color: #ae0da3;
+  --neutral-base: #666;
+  --neutral-on-base: #fff;
+  --primary-base: #083865;
+  --primary-on-base: #fff;
+  --radius-base: var(--size-base);
+  --radius-lg: var(--size-lg);
+  --radius-md: var(--size-md);
+  --radius-pill: 9999rem;
+  --radius-sm: var(--size-sm);
+  --radius-xl: var(--size-xl);
+  --radius-xs: var(--size-xs);
+  --radius-xxs: var(--size-xxs);
+  --recaptcha-alert-background-color: #000;
+  --recaptcha-alert-foreground: #fff;
+  --recaptcha-alert-overlay-color: rgb(0 0 0 / .5);
+  --sdt-hover-background-color: var(--btn-primary-background-color);
+  --sdt-hover-color: var(--btn-primary-color);
+  --sdt-pagination-border: var(--btn-border-width) var(--neutral-base);
+  --sdt-pagination-padding-block: var(--size-xxs);
+  --sdt-pagination-padding-inline: var(--size-xs);
+  --sdt-thead-hover-background-color: color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent-base));
+  --secondary-base: #650853;
+  --secondary-on-base: #fff;
+  --size-2xl: 3rem;
+  --size-3xl: 4rem;
+  --size-base: 1rem;
+  --size-lg: 1.5rem;
+  --size-md: 1.2rem;
+  --size-sm: .75rem;
+  --size-xl: 2rem;
+  --size-xs: .5rem;
+  --size-xxs: .25rem;
+  --spinner-color: var(--primary-base);
+  --spinner-overlay-color: rgb(0 0 0 / .6);
+  --spinner-size: var(--size-lg);
+  --spinner-stroke-width: .125rem;
   --status-danger-border-color: var(--status-danger-color);
-  --status-danger-fg-color: #fff;
-
-  --status-info-color: #0665c5;
+  --status-danger-color: #c00;
+  --status-danger-fg: #fff;
   --status-info-border-color: var(--status-info-color);
-  --status-info-fg-color: #fff;
-
-  --status-warning-color: #fc0;
+  --status-info-color: #0665c5;
+  --status-info-fg: #fff;
+  --status-success-border-color: var(--status-success-color);
+  --status-success-color: #046d19;
+  --status-success-fg: #fff;
   --status-warning-border-color: var(--status-warning-color);
-  --status-warning-fg-color: #4f2900;
-
-  --box-shadow-base: 0 0 1.2rem #00000040;
-
-}
-
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color-scheme: dark;
-
-    /* figma */
-    --body-bg-color: var(--stone-0);
-    --text-color: #000;
-    --footer-bg: #282c35;
-    --footer-fg: #fff;
-    --footer-link: var(--yellow-5);
-    --link-color: var(--primary);
-    --primary: #203c6e;
-    --secondary: #a3384e;
-    --secondary-fg: var(--body-bg-color);
-    --radius: 0.38rem;
-    /* end figma */
-
-    /* project */
-    /* end project */
-
-    --gray-light: var(--gray-11);
-    /* --gray-medium: var(--gray-6); */
-    --gray-dark: var(--gray-2);
-
-    --text-muted-color: var(--stone-5);
-    --text-dim-color: var(--gray-5);
-    --link-visited-color: var(--sand-3);
-
-    --btn-primary-bg-color: linear-gradient(45deg, var(--green-9), var(--green-10));
-    --btn-primary-fg-color: var(--gray-0);
-    --btn-primary-border-color: var(--green-10);
-    --btn-primary-hover-bg-color: var(--green-11);
-    --btn-primary-hover-fg-color: var(--btn-primary-fg-color);
-    --btn-primary-hover-border-color: var(--btn-primary-border-color);
-    --btn-primary-active-bg-color: var(--green-12);
-    --btn-primary-active-fg-color: var(--btn-primary-fg-color);
-    --btn-primary-active-border-color: var(--btn-primary-active-bg-color);
-    --btn-primary-focus-outline-color: color-mix(in srgb, var(--btn-primary-border-color) 25%, transparent);
-
-    --btn-secondary-bg-color: var(--stone-4);
-    --btn-secondary-fg-color: var(--stone-9);
-    --btn-secondary-border-color: var(--stone-6);
-    --btn-secondary-hover-bg-color: var(--stone-5);
-    --btn-secondary-hover-fg-color: var(--stone-11);
-    --btn-secondary-hover-border-color: var(--btn-secondary-border-color);
-    --btn-secondary-active-bg-color: var(--stone-11);
-    --btn-secondary-active-fg-color: var(--stone-0);
-    --btn-secondary-active-border-color: var(--btn-secondary-active-bg-color);
-    --btn-secondary-focus-outline-color: color-mix(in srgb, var(--btn-secondary-border-color) 50%, transparent);
-
-    --status-success-color: #04ba29;
-    --status-success-fg-color: #fff;
-
-    --status-danger-color: #dd0303;
-    --status-danger-fg-color: #fff;
-
-    --status-info-color: #044c94;
-    --status-info-fg-color: #fff;
-
-    --status-warning-color: #d1a804;
-    --status-warning-fg-color: #000;
-  }
+  --status-warning-color: #fc0;
+  --status-warning-fg: #4f2900;
+  --table-body-border-width: .0625rem;
+  --table-body-tr-alt-bg-color: #efefef;
+  --table-body-tr-hover-bg-color: #cbcbcb;
+  --table-border-color: #333;
+  --table-cell-line-height: 1.3;
+  --table-cell-padding-block: .3rem;
+  --table-cell-padding-inline: .6rem;
+  --table-thead-background-color: #ddd;
+  --table-thead-border-width: .1875rem;
+  --text-color: #000;
+  --text-dim: var(--text-muted);
+  --text-muted: var(--neutral-base);
+  --text-negative: #fff;
+  --text-selected-background-color: #ddd;
+  --text-selected-text: var(--body-text);
+  --toast-border-radius: var(--radius-sm);
+  --toast-duration: 5s;
+  --toast-font-size: var(--font-size-sm);
+  --toast-text-color: var(--text-color);
+  --z-index-overlay: 99;
 }

package/src/design-tokens/TODO.md

@@ -0,0 +1,2 @@
+* conversione in js?
+* automatizzare la creazione di proprietà ricorrenti (es il padding)

package/src/design-tokens/alerts.minimo.tokens.jsonc

@@ -0,0 +1,23 @@
+{
+  "alert": {
+    "border": {
+      "radius": {
+        "$value": "{radius.md}",
+        "$type": "dimension"
+      },
+    },
+
+    "drop-shadow": {
+      "$type": "shadow",
+      "$value": [
+        {
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "8px",
+          "spread": 0,
+          "color": "oklch(0 0 0 / 0.5)"
+        }
+      ]
+    }
+  }
+}

package/src/design-tokens/basic.minimo.tokens.jsonc

@@ -0,0 +1,52 @@
+{
+  "layout": {
+    "container": {
+      "max-width": {
+        "$type": "dimension",
+        "$value": "80rem"
+      }
+    }
+  },
+  "body": {
+    "background": {
+      "color": {
+        "$type": "color",
+        "$value": "#fff"
+      }
+    },
+    "text": {
+      "$type": "color",
+      "$value": "{text.color}"
+    }
+  },
+  "text": {
+    "muted": {
+      "$type": "color",
+      "$value": "{neutral.base}"
+    },
+    "dim": {
+      "$type": "color",
+      "$value": "{text.muted}"
+    },
+    "negative": {
+      "$type": "color",
+      "$value": "#ffffff"
+    },
+    "color": {
+      "$type": "color",
+      "$value": "#000"
+    },
+    "selected": {
+      "background": {
+        "color": {
+          "$type": "color",
+          "$value": "#ddd"
+        }
+      },
+      "text": {
+        "$type": "color",
+        "$value": "{body.text}"
+      }
+    }
+  }
+}