@andreyshpigunov/x 0.5.7 → 0.5.8

package/src/components/x/variables.css

@@ -7,214 +7,210 @@ All right reserved.
 ----------------------------------------*/
 
 
-@layer variables {
-  
-  :root{
-    /* Base variables */
-    --font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-                  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    --font-family-mono: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
-    --line-height: 1.5;
-    --font-size-base: 62.5%;
-    --font-size: 1.6rem;
-    --font-scale: 1;
-    --font-color: #000;
-    --background-color: #fff;
-    
-    /* Spaces */
-    --space-0:  0;
-    --space-1:  0.4rem;
-    --space-2:  0.8rem;
-    --space-3:  1.2rem;
-    --space-4:  1.6rem;
-    --space-5:  2.0rem;
-    --space-6:  2.4rem;
-    --space-7:  3.2rem;
-    --space-8:  4.0rem;
-    --space-9:  4.8rem;
-    --space-10: 6.4rem;
-    
-    --headers-margin-top: 1em;
-    --headers-margin-bottom: .5em;
-    --headers-font-family: var(--font-family);
-    --headers-font-weight: 700;
-    --headers-font-color: var(--font-color);
-    
-    --h1-font-size: 3.2rem;
-    --h2-font-size: 2.4rem;
-    --h3-font-size: 2.0rem;
-    --h4-font-size: 1.6rem;
-    --h5-font-size: 1.4rem;
-    --h6-font-size: 1.2rem;
-    
-    --h1-line-height: 1.2;
-    --h2-line-height: 1.3;
-    --h3-line-height: 1.4;
-    
-    --paragraph-margin: 1em;
-    
-    --figure-margin: 2.5em auto 2em;
-    --figcaption-margin-top: .5em;
-    --figcaption-font-size: var(--font-size);
-    --figcaption-color: #999;
-    
-    --blockquote-margin: 2em 0;
-    --blockquote-padding: 1em 2em;
-    --blockquote-border: none;
-    --blockquote-font-style: italic;
-    
-    --table-padding: .5em .75em;
-    --table-border: 1px solid #e4e4e4;
-    --table-caption-font-weight: 700;
-    --table-header-font-weight: 700;
-    
-    --container-max-width: 160rem;
-    
-    --shadow-1:  0 2px 4px #00000016;
-    --shadow-2:  0 4px 8px #00000016;
-    --shadow-3:  0 6px 12px #00000016;
-    --shadow-4:  0 8px 16px #00000016;
-    --shadow-5:  0 10px 20px #00000016;
-    --shadow-6:  0 12px 24px #00000016;
-    --shadow-7:  0 14px 28px #00000016;
-    --shadow-8:  0 16px 32px #00000016;
-    --shadow-9:  0 18px 36px #00000016;
-    --shadow-10: 0 20px 40px #00000016;
-    
-    --link-color: #0060cc;
-    --link-decoration-line: underline;
-    --link-decoration-style: solid;
-    
-    /*
-      Additional variables and their default values:
-      --link-color-hover: var(--link-color);
-      --link-color-visited: var(--link-color);
-      --link-decoration-line-hover: var(--link-decoration-line-hover, var(--link-decoration-line));
-      --link-decoration-style-hover: var(--link-decoration-style-hover, var(--link-decoration-style));
-      --link-decoration-thickness: .06em;
-      --link-decoration-color: color-mix(in srgb, currentcolor, transparent 75%);
-      --link-decoration-color-hover: currentcolor;
-      --link-decoration-color-visited: currentcolor;
-      --link-underline-offset: .25em;
-      --link-transition: all .1s ease-out;
-    */
-    
-    --color-primary: #0088ee;
-    --color-success: #33c433;
-    --color-warning: #ff8800;
-    --color-danger: #ee3333;
-    --color-error: #ee3333;
-    --color-black: #fff;
-    --color-white: #000;
-    --color-grey: #f4f5f6;
-    
-    /* Required variables */
-    --button-height-coeff: 2.5;
-    --button-side-padding-coeff: 1.25;
-    --button-color: var(--color-grey);
-    --button-font-family: var(--font-family);
-    --button-font-color: #000;
-    --button-font-weight: 400;
-    --button-transition: all .1s ease-out;
-    --button-font-size: var(--font-size);
-    --button-transform: translate(0,0);
-    --button-transform-hover: none;
-    --button-transform-active: translate(0,.1rem);
-    --button-transform-origin: center bottom;
-    --button-box-shadow: 0 .1rem .1rem #00000011;
-    --button-box-shadow-hover: 0 .1rem .1rem #00000022;
-    --button-box-shadow-active: inset 0 0 .1rem #00000011;
-    --button-disabled-opacity: .5;
-    --button-border-radius: calc(var(--button-font-size) * 0.6);
-    
-    /* Strength of hover (lighten) / active (darken). Override on :root or .button--* to tune. */
-    --button-hover-lighten: 10%;
-    --button-active-darken: 5%;
-    
-    /*
-      Additional variables and their default values:
-      --button-height: 4rem;
-      --button-side-padding: 2rem;
-      --button-hover-lighten: 20%  (how much white to mix on hover);
-      --button-active-darken: 20%  (how much black to mix on active).
-      Override --button-color-hover / --button-color-active for custom behaviour (e.g. .button--clear).
-    */
-    
-    --dropdown-border-radius: 1.2rem;
-    --dropdown-backgroud-color: white;
-    --dropdown-box-shadow: var(--shadow-4);
-    --dropdown-padding: .8rem;
-    --dropdown-max-width: 28rem;
-    --dropdown-item-padding: .6rem 2.4rem .6rem 1.2rem;
-    --dropdown-item-font-size: inherit;
-    --dropdown-item-font-color: black;
-    --dropdown-item-font-color-hover: black;
-    --dropdown-item-background-color: white;
-    --dropdown-item-background-color-hover: var(--color-grey);
-    --dropdown-divider-color: var(--color-grey);
-    
-    --form-width: 40rem;
-    --form-height-coeff: 2.6;
-    --form-side-padding: 1rem;
-    
-    --form-font-size: var(--font-size);
-    --form-font-color: #000;
-    --form-font-color-readonly: #000;
-    --form-font-color-disabled: #666;
-    --form-font-color-placeholder: #ccc;
-    
-    --form-border-width: .1rem;
-    --form-border-radius: .8rem;
-    --form-border-color: #d4d4d4;
-    --form-border-color-focused: #8cf;
-    --form-border-color-error: #f00;
-    --form-border-color-readonly: #ddd;
-    --form-border-color-disabled: #ddd;
-    
-    --form-background-color: #fff;
-    --form-background-color-readonly: #fafafa;
-    --form-background-color-disabled: #f6f6f6;
-    
-    /*
-      Additional variables and their default values:
-      --form-height: 4rem;
-    */
-    
-    --modal-margin-top: 3vw;
-    --modal-margin-bottom: 3vw;
-    --modal-margin-left: 3vw;
-    --modal-margin-right: 3vw;
-    --modal-padding-top: clamp(2.5rem, 4vw, 5rem);
-    --modal-padding-bottom: clamp(2.5rem, 4vw, 5rem);
-    --modal-padding-left: clamp(2.5rem, 4vw, 5rem);
-    --modal-padding-right: clamp(2.5rem, 4vw, 5rem);
-    --modal-background: #fff;
-    --modal-box-shadow: 0 1rem 4rem #00000033;
-    --modal-border-radius: 1.6rem;
-    --modal-closer-margin: .6rem;
-    --modal-closer-area: 4rem;
-    --modal-closer-size: 2.4rem;
-    --modal-closer-width: .2rem;
-    --modal-closer-color: #ccc;
-    --modal-closer-color-hover: #f00;
-    --modal-overlay-background-color: #00000066;
-    
-    --scroll-scrollbar-size: 6px;
-    --scroll-scrollbar-thumb-background: #00000011;
-    --scroll-scrollbar-thumb-background-hover: #00000022;
-    
-    --slider-point-color: #ffffff66;
-    --slider-point-color-active: #fff;
-    --slider-point-size: .3rem;
-    --slider-indicators-gap: .3rem;
-    --slider-indicators-top: auto;
-    --slider-indicators-left: 1.2rem;
-    --slider-indicators-right: 1.2rem;
-    --slider-indicators-bottom: 1rem;
-    --slider-indicators-width: auto;
-    --slider-indicators-height: var(--slider-point-size);
-    --slider-indicators-init-opacity: 0;
-    --slider-object-fit: cover;
-  }
+:root{
+  /* Base variables */
+  --font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+                "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family-mono: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  --line-height: 1.5;
+  --font-size-base: 62.5%;
+  --font-size: 1.6rem;
+  --font-scale: 1;
+  --font-color: #000;
+  --background-color: #fff;
   
+  /* Spaces */
+  --space-0:  0;
+  --space-1:  0.4rem;
+  --space-2:  0.8rem;
+  --space-3:  1.2rem;
+  --space-4:  1.6rem;
+  --space-5:  2.0rem;
+  --space-6:  2.4rem;
+  --space-7:  3.2rem;
+  --space-8:  4.0rem;
+  --space-9:  4.8rem;
+  --space-10: 6.4rem;
+  
+  --headers-margin-top: 1em;
+  --headers-margin-bottom: .5em;
+  --headers-font-family: var(--font-family);
+  --headers-font-weight: 700;
+  --headers-font-color: var(--font-color);
+  
+  --h1-font-size: 3.2rem;
+  --h2-font-size: 2.4rem;
+  --h3-font-size: 2.0rem;
+  --h4-font-size: 1.6rem;
+  --h5-font-size: 1.4rem;
+  --h6-font-size: 1.2rem;
+  
+  --h1-line-height: 1.2;
+  --h2-line-height: 1.3;
+  --h3-line-height: 1.4;
+  
+  --paragraph-margin: 1em;
+  
+  --figure-margin: 2.5em auto 2em;
+  --figcaption-margin-top: .5em;
+  --figcaption-font-size: var(--font-size);
+  --figcaption-color: #999;
+  
+  --blockquote-margin: 2em 0;
+  --blockquote-padding: 1em 2em;
+  --blockquote-border: none;
+  --blockquote-font-style: italic;
+  
+  --table-padding: .5em .75em;
+  --table-border: 1px solid #e4e4e4;
+  --table-caption-font-weight: 700;
+  --table-header-font-weight: 700;
+  
+  --container-max-width: 160rem;
+  
+  --shadow-1:  0 2px 4px #00000016;
+  --shadow-2:  0 4px 8px #00000016;
+  --shadow-3:  0 6px 12px #00000016;
+  --shadow-4:  0 8px 16px #00000016;
+  --shadow-5:  0 10px 20px #00000016;
+  --shadow-6:  0 12px 24px #00000016;
+  --shadow-7:  0 14px 28px #00000016;
+  --shadow-8:  0 16px 32px #00000016;
+  --shadow-9:  0 18px 36px #00000016;
+  --shadow-10: 0 20px 40px #00000016;
+  
+  --link-color: #0060cc;
+  --link-decoration-line: underline;
+  --link-decoration-style: solid;
+  
+  /*
+    Additional variables and their default values:
+    --link-color-hover: var(--link-color);
+    --link-color-visited: var(--link-color);
+    --link-decoration-line-hover: var(--link-decoration-line-hover, var(--link-decoration-line));
+    --link-decoration-style-hover: var(--link-decoration-style-hover, var(--link-decoration-style));
+    --link-decoration-thickness: .06em;
+    --link-decoration-color: color-mix(in srgb, currentcolor, transparent 75%);
+    --link-decoration-color-hover: currentcolor;
+    --link-decoration-color-visited: currentcolor;
+    --link-underline-offset: .25em;
+    --link-transition: all .1s ease-out;
+  */
+  
+  --color-primary: #0088ee;
+  --color-success: #33c433;
+  --color-warning: #ff8800;
+  --color-danger: #ee3333;
+  --color-error: #ee3333;
+  --color-black: #fff;
+  --color-white: #000;
+  --color-grey: #f4f5f6;
+  
+  /* Required variables */
+  --button-height-coeff: 2.5;
+  --button-side-padding-coeff: 1.25;
+  --button-color: var(--color-grey);
+  --button-font-family: var(--font-family);
+  --button-font-color: #000;
+  --button-font-weight: 400;
+  --button-transition: all .1s ease-out;
+  --button-font-size: var(--font-size);
+  --button-transform: translate(0,0);
+  --button-transform-hover: none;
+  --button-transform-active: translate(0,.1rem);
+  --button-transform-origin: center bottom;
+  --button-box-shadow: 0 .1rem .1rem #00000011;
+  --button-box-shadow-hover: 0 .1rem .1rem #00000022;
+  --button-box-shadow-active: inset 0 0 .1rem #00000011;
+  --button-disabled-opacity: .5;
+  --button-border-radius: calc(var(--button-font-size) * 0.6);
+  
+  /* Strength of hover (lighten) / active (darken). Override on :root or .button--* to tune. */
+  --button-hover-lighten: 10%;
+  --button-active-darken: 5%;
+  
+  /*
+    Additional variables and their default values:
+    --button-height: 4rem;
+    --button-side-padding: 2rem;
+    --button-hover-lighten: 20%  (how much white to mix on hover);
+    --button-active-darken: 20%  (how much black to mix on active).
+    Override --button-color-hover / --button-color-active for custom behaviour (e.g. .button--clear).
+  */
+  
+  --dropdown-border-radius: 1.2rem;
+  --dropdown-backgroud-color: white;
+  --dropdown-box-shadow: var(--shadow-4);
+  --dropdown-padding: .8rem;
+  --dropdown-max-width: 28rem;
+  --dropdown-item-padding: .6rem 2.4rem .6rem 1.2rem;
+  --dropdown-item-font-size: inherit;
+  --dropdown-item-font-color: black;
+  --dropdown-item-font-color-hover: black;
+  --dropdown-item-background-color: white;
+  --dropdown-item-background-color-hover: var(--color-grey);
+  --dropdown-divider-color: var(--color-grey);
+  
+  --form-width: 40rem;
+  --form-height-coeff: 2.6;
+  --form-side-padding: 1rem;
+  
+  --form-font-size: var(--font-size);
+  --form-font-color: #000;
+  --form-font-color-readonly: #000;
+  --form-font-color-disabled: #666;
+  --form-font-color-placeholder: #ccc;
+  
+  --form-border-width: .1rem;
+  --form-border-radius: .8rem;
+  --form-border-color: #d4d4d4;
+  --form-border-color-focused: #8cf;
+  --form-border-color-error: #f00;
+  --form-border-color-readonly: #ddd;
+  --form-border-color-disabled: #ddd;
+  
+  --form-background-color: #fff;
+  --form-background-color-readonly: #fafafa;
+  --form-background-color-disabled: #f6f6f6;
+  
+  /*
+    Additional variables and their default values:
+    --form-height: 4rem;
+  */
+  
+  --modal-margin-top: 3vw;
+  --modal-margin-bottom: 3vw;
+  --modal-margin-left: 3vw;
+  --modal-margin-right: 3vw;
+  --modal-padding-top: clamp(2.5rem, 4vw, 5rem);
+  --modal-padding-bottom: clamp(2.5rem, 4vw, 5rem);
+  --modal-padding-left: clamp(2.5rem, 4vw, 5rem);
+  --modal-padding-right: clamp(2.5rem, 4vw, 5rem);
+  --modal-background: #fff;
+  --modal-box-shadow: 0 1rem 4rem #00000033;
+  --modal-border-radius: 1.6rem;
+  --modal-closer-margin: .6rem;
+  --modal-closer-area: 4rem;
+  --modal-closer-size: 2.4rem;
+  --modal-closer-width: .2rem;
+  --modal-closer-color: #ccc;
+  --modal-closer-color-hover: #f00;
+  --modal-overlay-background-color: #00000066;
+  
+  --scroll-scrollbar-size: 6px;
+  --scroll-scrollbar-thumb-background: #00000011;
+  --scroll-scrollbar-thumb-background-hover: #00000022;
+  
+  --slider-point-color: #ffffff66;
+  --slider-point-color-active: #fff;
+  --slider-point-size: .3rem;
+  --slider-indicators-gap: .3rem;
+  --slider-indicators-top: auto;
+  --slider-indicators-left: 1.2rem;
+  --slider-indicators-right: 1.2rem;
+  --slider-indicators-bottom: 1rem;
+  --slider-indicators-width: auto;
+  --slider-indicators-height: var(--slider-point-size);
+  --slider-indicators-init-opacity: 0;
+  --slider-object-fit: cover;
 }

package/src/css/x.css

@@ -7,35 +7,39 @@ All right reserved.
 ----------------------------------------*/
 
 
-@layer variables, reset, space, typo, links, grid, flex, flow, form, buttons, dropdown, sheets, slider, sticky, modal, scroll, icons, app, helpers, colors;
-
-@import "../components/x/variables.css";
-@import "../components/x/reset.css";
-@import "../components/x/space.css";
-@import "../components/x/typo.css";
-@import "../components/x/links.css";
-@import "../components/x/grid.css";
-@import "../components/x/flex.css";
-@import "../components/x/flow.css";
-@import "../components/x/form.css";
-@import "../components/x/buttons.css";
-@import "../components/x/dropdown.css";
-@import "../components/x/sheets.css";
-@import "../components/x/slider.css";
-@import "../components/x/sticky.css";
-@import "../components/x/modal.css";
+/*! Доступные слои */
+/* @layer variables, reset, space, typo, links, grid, flex, flow, form, buttons, dropdown, sheets, slider, sticky, modal, scroll, icons, app, helpers, colors; */
+
+
+@import "../components/x/variables.css" layer(variables);
+@import "../components/x/reset.css"     layer(reset);
+@import "../components/x/space.css"     layer(space);
+@import "../components/x/typo.css"      layer(typo);
+@import "../components/x/links.css"     layer(links);
+@import "../components/x/grid.css"      layer(grid);
+@import "../components/x/flex.css"      layer(flex);
+@import "../components/x/flow.css"      layer(flow);
+@import "../components/x/form.css"      layer(form);
+@import "../components/x/buttons.css"   layer(buttons);
+@import "../components/x/dropdown.css"  layer(dropdown);
+@import "../components/x/sheets.css"    layer(sheets);
+@import "../components/x/slider.css"    layer(slider);
+@import "../components/x/sticky.css"    layer(sticky);
+@import "../components/x/modal.css"     layer(modal);
 /* @import "../components/x/debug.css"; */
-@import "../components/x/scroll.css";
-@import "../components/x/icons.css";
-@import "../components/x/helpers.css";
-@import "../components/x/colors.css";
-
-@layer app {
-  /*
-    Фейковый слой, чтобы можно было обернуть в него стили
-    приложения без повторного перечисления слоев.
-  */
-}
+@import "../components/x/scroll.css"    layer(scroll);
+@import "../components/x/icons.css"     layer(icons);
+@import "../components/x/app.css"       layer(app);
+@import "../components/x/helpers.css"   layer(helpers);
+@import "../components/x/colors.css"    layer(colors);
+
+
+
+/*
+  Фейковый слой, чтобы можно было обернуть в него стили
+  приложения без повторного перечисления слоев.
+*/
+/* @layer app {} */
 
 /*
   .button