From dd2cc3c58fb027a9b654171e3072f5ff88f67790 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 7 Jun 2023 11:34:52 +0200 Subject: [PATCH 01/30] Loader - - add new state that change CSS loader rotate state to how much is loaded - Add new demo loader.mdx - style new state "is-loading" - _loader.scss --- apps/pink/src/pages/elements/loader.mdx | 17 ++++++++++ packages/ui/src/6-elements/_loader.scss | 44 +++++++++++++++++++++---- 2 files changed, 55 insertions(+), 6 deletions(-) diff --git a/apps/pink/src/pages/elements/loader.mdx b/apps/pink/src/pages/elements/loader.mdx index 2280d35423..61bbeab556 100644 --- a/apps/pink/src/pages/elements/loader.mdx +++ b/apps/pink/src/pages/elements/loader.mdx @@ -15,4 +15,21 @@ description: Use loaders to indicate to users that something is in progress and
+ + + +## Loading precent state +Work different from the other rotate loaders. +| State Class | Type | | +| -------------------- | -------- | ----------------------------------------------- | +| `is-loading` | Loading | Change behaving from rotating to loading | + +| param | represents | Example: | +| ----------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------- | +| `--loading` | Loading precent | `--loading: 65%;` | +| `-loader-bg-color-light` | inner circle color (light-mode) that will fit background-color of the container | `--loader-bg-color-light: var(--color-neutral-5);` | +| `-loader-bg-color-dark` | inner circle color (dark-mode) that will fit background-color of the container | `--loader-bg-color-dark: var(--color-neutral-400);`| + + +
\ No newline at end of file diff --git a/packages/ui/src/6-elements/_loader.scss b/packages/ui/src/6-elements/_loader.scss index 92f7198d15..7dada083b1 100644 --- a/packages/ui/src/6-elements/_loader.scss +++ b/packages/ui/src/6-elements/_loader.scss @@ -1,17 +1,47 @@ @use '../abstract' as *; .loader { - --p-base-color: var(--color-neutral-10); - --p-base-full-color: var(--color-neutral-50); + --loading: 0%; + + --p-loader-border-base-color: var(--color-neutral-10); + --p-loader-base-full-color: var(--color-neutral-50); --p-loader-size: var(--loader-size, #{pxToRem(24)}); --p-loader-border-size: var(--loader-border-size, #{pxToRem(2.5)}); + /* loading inner bg color */ + --p-loader-bg-color: var(--loader-bg-color-default, var(--p-loader-bg-color-default)); + --p-loader-bg-color-default: var(--loader-bg-color-light, var(--p-loader-bg-color-light)); + --p-loader-bg-color-light: var(--color-neutral-5); + --p-loader-bg-color-dark: var(--color-neutral-200); + animation: rotate 1s infinite linear; /* global animation */ + position:relative; inline-size:var(--p-loader-size); block-size:var(--p-loader-size); - border:solid var(--p-loader-border-size) hsl(var(--p-base-color)); + border:solid var(--p-loader-border-size) hsl(var(--p-loader-border-base-color)); border-radius: var(--border-radius-circular); - border-block-start-color:var(--p-base-full-color); border-inline-start-color:var(--p-base-full-color); + border-block-start-color:hsl(var(--p-loader-base-full-color)); border-inline-start-color:hsl(var(--p-loader-base-full-color)); + svg { inline-size:100%; block-size:100%; } + &.is-loading { + animation:none; + border-block-start-color: hsl(var(--p-loader-border-base-color)); + border-inline-start-color: hsl(var(--p-loader-border-base-color)); + &::before { + content:""; display:flex; + position:absolute; inset:calc(var(--p-loader-border-size) * -1); + inline-size:calc(100% + var(--p-loader-border-size)*2); + block-size:calc(100% + var(--p-loader-border-size)*2); + border-radius:var(--border-radius-circular); + background:conic-gradient(hsl(var(--p-loader-base-full-color)) 0deg, hsl(var(--p-loader-base-full-color)) var(--loading), transparent var(--loading), transparent 360deg); + } + &::after { + content:""; display:block; + position:absolute; inset:0; + inline-size:100%; block-size:100%; + border-radius:var(--border-radius-circular); + background: hsl(var(--p-loader-bg-color)); + } + } &.is-small { --p-loader-size: var(--loader-size, #{pxToRem(16)}); @@ -20,7 +50,9 @@ /* Theme Dark */ #{$theme-dark} & { - --p-base-color: var(--color-neutral-120); - --p-base-full-color: var(--color-neutral-50); + --p-loader-border-base-color: var(--color-neutral-120); + --p-loader-base-full-color: var(--color-neutral-50); + + --p-loader-bg-color: var(--loader-bg-color-dark, var(--p-loader-bg-color-dark)); } } \ No newline at end of file From fd17a73c3994c254014b5fc1bea24f625ed1f714 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 7 Jun 2023 15:28:56 +0200 Subject: [PATCH 02/30] Small styles arrange --- packages/ui/src/_4-icons.scss | 2 +- packages/ui/src/_index.scss | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/ui/src/_4-icons.scss b/packages/ui/src/_4-icons.scss index f72139d81f..d01689f8f3 100644 --- a/packages/ui/src/_4-icons.scss +++ b/packages/ui/src/_4-icons.scss @@ -1,5 +1,5 @@ html [class^="icon-"], html [class*=" icon-"] { - &::before { vertical-align:middle; } /* add for centering */ font-size: var(--icon-size-medium); + &::before { vertical-align:middle; } /* add for centering */ } \ No newline at end of file diff --git a/packages/ui/src/_index.scss b/packages/ui/src/_index.scss index 3bf994c9ec..23fcc3436e 100644 --- a/packages/ui/src/_index.scss +++ b/packages/ui/src/_index.scss @@ -1,5 +1,3 @@ -//@use '10-themes/light'; /* load theme layer */ - @use '1-css-variables' as *; @use '2-resets' as *; @use '4-icons' as *; From 6804671899b56223fdce0ea122acc84d3c2cd5fa Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 7 Jun 2023 16:16:00 +0200 Subject: [PATCH 03/30] CSS Layers - Refactor CSS structure to use CSS layers. - Now utility class are stronger than all selector even when CSS specificity is higher --- packages/ui/src/_9-utilities.scss | 86 +++++++++++++++---------------- packages/ui/src/_index.scss | 46 ++++++++++++++--- 2 files changed, 81 insertions(+), 51 deletions(-) diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss index c7c7bbafab..fc002917d6 100644 --- a/packages/ui/src/_9-utilities.scss +++ b/packages/ui/src/_9-utilities.scss @@ -61,13 +61,13 @@ /* color text light mode only */ :where(body:not(#{$theme-dark})) { - .u-color-light-only-text-neutral-70 { color:hsl(var(--color-neutral-70))!important; } + .u-color-light-only-text-neutral-70 { color:hsl(var(--color-neutral-70)); } } /* color text dark mode only */ #{$theme-dark} { - .u-color-dark-only-text-neutral-50 { color:hsl(var(--color-neutral-50))!important; } + .u-color-dark-only-text-neutral-50 { color:hsl(var(--color-neutral-50)); } } /* position */ @@ -85,7 +85,7 @@ .u-position-relative { position:relative; } .u-position-absolute { position:absolute; } .u-position-fixed { position:fixed; } -.u-position-static { position:static!important; } +.u-position-static { position:static; } .u-inset-0 { inset:0; } @@ -136,9 +136,9 @@ .u-contents-mobile{ @media #{$break1} {display:contents;} } .u-box-sizing-content { box-sizing:content-box; } -.u-sep-inline-start { border-inline-start:solid pxToRem(1) hsl(var(--color-border))!important; } -.u-sep-block-start { border-block-start:solid pxToRem(1) hsl(var(--color-border))!important; } -.u-sep-block-end { border-block-end:solid pxToRem(1) hsl(var(--color-border))!important; } +.u-sep-inline-start { border-inline-start:solid pxToRem(1) hsl(var(--color-border)); } +.u-sep-block-start { border-block-start:solid pxToRem(1) hsl(var(--color-border)); } +.u-sep-block-end { border-block-end:solid pxToRem(1) hsl(var(--color-border)); } .u-gap-2 { gap:pxToRem(2); } .u-gap-4 { gap:pxToRem(4); } @@ -201,7 +201,7 @@ .u-max-width-100-percent { max-inline-size:100%; } .u-height-100-percent { block-size:100%; } -.u-height-auto { block-size:auto!important; } +.u-height-auto { block-size:auto; } .u-min-height-100 { min-block-size:pxToRem(100); } .u-min-height-184 { min-block-size:pxToRem(184); } @@ -212,7 +212,7 @@ .u-full-screen-height { block-size:100vh; block-size:100lvh; } /* alignments */ -.u-main-start { justify-content:start!important; } +.u-main-start { justify-content:start; } .u-main-center { justify-content:center; } .u-main-space-between { justify-content:space-between; } .u-main-end { justify-content:end; } @@ -227,42 +227,42 @@ .u-cross-child-end { align-self:end; } /* box model */ -.u-padding-0 { padding:0!important; } -.u-padding-8 { padding:pxToRem(8)!important; } -.u-padding-12 { padding:pxToRem(12)!important; } -.u-padding-16 { padding:pxToRem(16)!important; } -.u-padding-24 { padding:pxToRem(24)!important; } -.u-padding-32 { padding:pxToRem(32)!important; } -.u-padding-64 { padding:pxToRem(64)!important; } +.u-padding-0 { padding:0; } +.u-padding-8 { padding:pxToRem(8); } +.u-padding-12 { padding:pxToRem(12); } +.u-padding-16 { padding:pxToRem(16); } +.u-padding-24 { padding:pxToRem(24); } +.u-padding-32 { padding:pxToRem(32); } +.u-padding-64 { padding:pxToRem(64); } -.u-padding-inline-0 { padding-inline:0!important; } -.u-padding-inline-8 { padding-inline:pxToRem(8)!important; } -.u-padding-inline-12 { padding-inline:pxToRem(12)!important; } -.u-padding-inline-16 { padding-inline:pxToRem(16)!important; } -.u-padding-inline-24 { padding-inline:pxToRem(24)!important; } -.u-padding-inline-32 { padding-inline:pxToRem(32)!important; } +.u-padding-inline-0 { padding-inline:0; } +.u-padding-inline-8 { padding-inline:pxToRem(8); } +.u-padding-inline-12 { padding-inline:pxToRem(12); } +.u-padding-inline-16 { padding-inline:pxToRem(16); } +.u-padding-inline-24 { padding-inline:pxToRem(24); } +.u-padding-inline-32 { padding-inline:pxToRem(32); } -.u-padding-inline-start-0 { padding-inline-start:0!important; } +.u-padding-inline-start-0 { padding-inline-start:0; } -.u-padding-inline-end-0 { padding-inline-end:0!important; } -.u-padding-inline-end-12 { padding-inline-end:pxToRem(12)!important; } -.u-padding-inline-end-56 { padding-inline-end:pxToRem(56)!important; } -.u-padding-inline-end-120 { padding-inline-end:pxToRem(120)!important; } +.u-padding-inline-end-0 { padding-inline-end:0; } +.u-padding-inline-end-12 { padding-inline-end:pxToRem(12); } +.u-padding-inline-end-56 { padding-inline-end:pxToRem(56); } +.u-padding-inline-end-120 { padding-inline-end:pxToRem(120); } -.u-padding-block-8 { padding-block:pxToRem(8)!important; } -.u-padding-block-12 { padding-block:pxToRem(12)!important; } +.u-padding-block-8 { padding-block:pxToRem(8); } +.u-padding-block-12 { padding-block:pxToRem(12); } -.u-padding-block-start-16 { padding-block-start:pxToRem(16)!important; } -.u-padding-block-start-20 { padding-block-start:pxToRem(20)!important; } +.u-padding-block-start-16 { padding-block-start:pxToRem(16); } +.u-padding-block-start-20 { padding-block-start:pxToRem(20); } -.u-padding-block-end-32 { padding-block-end:pxToRem(32)!important; } -.u-padding-block-end-56 { padding-block-end:pxToRem(56)!important; } +.u-padding-block-end-32 { padding-block-end:pxToRem(32); } +.u-padding-block-end-56 { padding-block-end:pxToRem(56); } -.u-margin-auto { margin:auto!important; } -.u-margin-16-negative { margin:pxToRem(-16)!important;} -.u-margin-0 { margin:0!important; } -.u-margin-32 { margin:pxToRem(32)!important; } +.u-margin-auto { margin:auto; } +.u-margin-16-negative { margin:pxToRem(-16);} +.u-margin-0 { margin:0; } +.u-margin-32 { margin:pxToRem(32); } .u-margin-inline-auto { margin-inline:auto; } .u-margin-inline-start-auto { margin-inline-start:auto; } @@ -295,8 +295,8 @@ .u-margin-inline-end-16 { margin-inline-end:pxToRem(16); } .u-margin-inline-end-24 { margin-inline-end:pxToRem(24); } -.u-border-width-0 { border-width:0!important; } -.u-mobile-border-width-0 { @media #{$break1} { border-width:0!important; } } +.u-border-width-0 { border-width:0; } +.u-mobile-border-width-0 { @media #{$break1} { border-width:0; } } //.u-border-radius-4 { border-radius:var(--border-radius-xsmall); } //.u-border-radius-8 { border-radius:var(--border-radius-small); } @@ -337,21 +337,21 @@ body:not(#{$theme-dark}) { /* responsive global state classes */ .is-only-mobile { - @media #{$break2open} { display:none!important; } + @media #{$break2open} { display:none; } } .is-only-tablet { - @media #{$break1}, #{$break3open} { display:none!important; } + @media #{$break1}, #{$break3open} { display:none; } } .is-only-desktop { - @media #{$break1}, #{$break2} { display:none!important; } + @media #{$break1}, #{$break2} { display:none; } } .is-not-mobile { - @media #{$break1} { display:none!important; } + @media #{$break1} { display:none; } } .is-not-desktop { - @media #{$break3open} { display:none!important; } + @media #{$break3open} { display:none; } } \ No newline at end of file diff --git a/packages/ui/src/_index.scss b/packages/ui/src/_index.scss index 23fcc3436e..fd3963caca 100644 --- a/packages/ui/src/_index.scss +++ b/packages/ui/src/_index.scss @@ -1,8 +1,38 @@ -@use '1-css-variables' as *; -@use '2-resets' as *; -@use '4-icons' as *; -@use '5-animations' as *; -@use '6-elements' as *; -@use '7-components' as *; -@use '8-grids' as *; -@use '9-utilities' as *; +@use 'sass:meta'; + +@layer css-variables, resets, icons, animations, elements, components, grids, utilities; + +@layer css-variables { + @include meta.load-css('1-css-variables'); +} +@layer resets { + @include meta.load-css('2-resets'); +} +@layer icons { + @include meta.load-css('4-icons'); +} +@layer animations { + @include meta.load-css('5-animations'); +} +@layer elements { + @include meta.load-css('6-elements'); +} +@layer components { + @include meta.load-css('7-components'); +} +@layer grids { + @include meta.load-css('8-grids'); +} +@layer utilities { + @include meta.load-css('9-utilities'); +} + +/* old way - before css layers */ +//@use '1-css-variables' as *; +//@use '2-resets' as *; +//@use '4-icons' as *; +//@use '5-animations' as *; +//@use '6-elements' as *; +//@use '7-components' as *; +//@use '8-grids' as *; +//@use '9-utilities' as *; From d1434c18103d9da6032956c3d5d86868604cf6b3 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 7 Jun 2023 17:29:00 +0200 Subject: [PATCH 04/30] CSS Layers - Clear important rules from documentation as well. After cleaning them from _9-utilities.scss --- apps/pink/src/pages/utilities/box-model.mdx | 130 +++++++++---------- apps/pink/src/pages/utilities/display.mdx | 12 +- apps/pink/src/pages/utilities/position.mdx | 2 +- apps/pink/src/pages/utilities/responsive.mdx | 14 +- apps/pink/src/pages/utilities/text.mdx | 10 +- apps/pink/src/pages/utilities/visibility.mdx | 20 +-- 6 files changed, 94 insertions(+), 94 deletions(-) diff --git a/apps/pink/src/pages/utilities/box-model.mdx b/apps/pink/src/pages/utilities/box-model.mdx index 6a77403ece..f2a345ae2c 100644 --- a/apps/pink/src/pages/utilities/box-model.mdx +++ b/apps/pink/src/pages/utilities/box-model.mdx @@ -3,71 +3,71 @@ title: Box Model description: Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation. --- -| Class | Scss Define | Compiled CSS | -| ---------------------------------- | --------------------------------------------- | ---------------------------------------- | -| `u-padding-0` | `padding: 0 !important;` | Stays the same | -| `u-padding-8` | `padding: pxToRem(8) !important;` | `padding: 0.5rem !important;` | -| `u-padding-12` | `padding: pxToRem(12) !important;` | `padding: 0.75rem !important;` | -| `u-padding-16` | `padding: pxToRem(16) !important;` | `padding: 1rem !important;` | -| `u-padding-24` | `padding: pxToRem(24) !important;` | `padding: 1.5rem !important;` | -| `u-padding-32` | `padding: pxToRem(32) !important;` | `padding: 2rem !important;` | -| `u-padding-64` | `padding: pxToRem(64) !important;` | `padding: 4rem !important;` | -| | | | -| `u-padding-inline-0` | `padding-inline: 0 !important;` | Stays the same | -| `u-padding-inline-8` | `padding-inline: pxToRem(8) !important;` | `padding-inline: 0.5rem !important;` | -| `u-padding-inline-12` | `padding-inline: pxToRem(12) !important;` | `padding-inline: 0.75rem !important;` | -| `u-padding-inline-16` | `padding-inline: pxToRem(16) !important;` | `padding-inline: 1rem !important;` | -| `u-padding-inline-24` | `padding-inline: pxToRem(24) !important;` | `padding-inline: 1.5rem !important;` | -| `u-padding-inline-32` | `padding-inline: pxToRem(32) !important;` | `padding-inline: 2rem !important;` | -| | | | -| `u-padding-inline-end-0` | `padding-inline-end: 0 !important;` | Stays the same | -| `u-padding-inline-end-12` | `padding-inline-end: pxToRem(12) !important;` | `padding-inline-end: 0.75rem !important;`| -| `u-padding-inline-end-56` | `padding-inline-end: pxToRem(56) !important;` | `padding-inline-end: 3.5rem !important;` | -| `u-padding-inline-end-120` | `padding-inline-end: pxToRem(120) !important;`| `padding-inline-end: 7.5rem !important;` | -| | | | -| `u-padding-block-8` | `padding-block: pxToRem(8) !important;` | `padding-block: 0.5rem !important;` | -| `u-padding-block-12` | `padding-block: pxToRem(12) !important;` | `padding-block: 0.75rem !important;` | -| | | | -| `u-padding-block-start-16` | `padding-block-start: pxToRem(16)!important;` | `padding-block-start: 1rem !important;` | -| `u-padding-block-start-20` | `padding-block-start: pxToRem(20)!important;` | `padding-block-start: 1,25rem !important;`| -| | | | -| `u-padding-block-end-32` | `padding-block-end: pxToRem(32)!important;` | `padding-block-end: 2rem !important;` | -| `u-padding-block-end-56` | `padding-block-end: pxToRem(56)!important;` | `padding-block-end: 3.5rem !important;` | -| | | | -| | | | -| `u-margin-16-negative` | `margin: pxToRem(-16) !important;` | `margin: -1rem !important;` | -| `u-margin-0` | `margin: 0 !important;` | Stays the same | -| `u-margin-32` | `margin: pxToRem(32) !important;` | `margin: 2rem !important;` | -| | | | -| `u-margin-inline-start-auto` | `margin-inline-start: auto;` | Stays the same | -| `u-margin-block-start-auto` | `margin-block-start: auto;` | Stays the same | -| | | | -| `u-margin-block-start-negative-56` | `margin-block-start: pxToRem(-56);` | `margin-block-start: pxToRem(-56);` | -| | | | -| `u-margin-block-start-2` | `margin-block-start: pxToRem(2);` | `margin-block-start: 0.125rem;` | -| `u-margin-block-start-4` | `margin-block-start: pxToRem(4);` | `margin-block-start: 0.25rem;` | -| `u-margin-block-start-8` | `margin-block-start: pxToRem(8);` | `margin-block-start: 0.5rem;` | -| `u-margin-block-start-12` | `margin-block-start: pxToRem(12);` | `margin-block-start: 0.75rem;` | -| `u-margin-block-start-16` | `margin-block-start: pxToRem(16);` | `margin-block-start: 1rem;` | -| `u-margin-block-start-20` | `margin-block-start: pxToRem(20);` | `margin-block-start: 1.25rem;` | -| `u-margin-block-start-24` | `margin-block-start: pxToRem(24);` | `margin-block-start: 1.5rem;` | -| `u-margin-block-start-32` | `margin-block-start: pxToRem(32);` | `margin-block-start: 2rem;` | -| `u-margin-block-start-40` | `margin-block-start: pxToRem(40);` | `margin-block-start: 2.5rem;` | -| `u-margin-block-start-48` | `margin-block-start: pxToRem(48);` | `margin-block-start: 3rem;` | -| `u-margin-block-start-52` | `margin-block-start: pxToRem(52);` | `margin-block-start: 3.25rem;` | -| `u-margin-block-start-100` | `margin-block-start: pxToRem(100);` | `margin-block-start: 6.25rem;` | -| `u-margin-block-start-200` | `margin-block-start: pxToRem(200);` | `margin-block-start: 12.5rem;` | -| `u-margin-block-start-300` | `margin-block-start: pxToRem(300);` | `margin-block-start: 18.75rem;` | -| | | | -| `u-margin-inline-start-4` | `margin-inline-start: pxToRem(4);` | `margin-inline-start: 0.25rem;` | -| `u-margin-inline-start-8` | `margin-inline-start: pxToRem(8);` | `margin-inline-start: 0.5rem;` | -| `u-margin-inline-start-12` | `margin-inline-start: pxToRem(12);` | `margin-inline-start: 0.75rem;` | -| `u-margin-inline-start-16` | `margin-inline-start: pxToRem(16);` | `margin-inline-start: 1rem;` | -| `u-margin-inline-start-24` | `margin-inline-start: pxToRem(24);` | `margin-inline-start: 1.5rem;` | -| `u-margin-inline-start-32` | `margin-inline-start: pxToRem(32);` | `margin-inline-start: 2rem;` | -| | | | -| `u-margin-inline-end-16` | `margin-inline-end: pxToRem(16);` | `margin-inline-end: 1rem;` | -| `u-margin-inline-end-24` | `margin-inline-end: pxToRem(24);` | `margin-inline-end: 1.5rem;` | +| Class | Scss Define | Compiled CSS | +| ---------------------------------- | ---------------------------------- | ----------------------------- | +| `u-padding-0` | `padding: 0;` | Stays the same | +| `u-padding-8` | `padding: pxToRem(8);` | `padding: 0.5rem;` | +| `u-padding-12` | `padding: pxToRem(12);` | `padding: 0.75rem;` | +| `u-padding-16` | `padding: pxToRem(16);` | `padding: 1rem;` | +| `u-padding-24` | `padding: pxToRem(24);` | `padding: 1.5rem;` | +| `u-padding-32` | `padding: pxToRem(32);` | `padding: 2rem;` | +| `u-padding-64` | `padding: pxToRem(64);` | `padding: 4rem;` | +| | | | +| `u-padding-inline-0` | `padding-inline: 0;` | Stays the same | +| `u-padding-inline-8` | `padding-inline: pxToRem(8);` | `padding-inline: 0.5rem;` | +| `u-padding-inline-12` | `padding-inline: pxToRem(12);` | `padding-inline: 0.75rem;` | +| `u-padding-inline-16` | `padding-inline: pxToRem(16);` | `padding-inline: 1rem;` | +| `u-padding-inline-24` | `padding-inline: pxToRem(24);` | `padding-inline: 1.5rem;` | +| `u-padding-inline-32` | `padding-inline: pxToRem(32);` | `padding-inline: 2rem;` | +| | | | +| `u-padding-inline-end-0` | `padding-inline-end: 0;` | Stays the same | +| `u-padding-inline-end-12` | `padding-inline-end: pxToRem(12);` | `padding-inline-end: 0.75rem;`| +| `u-padding-inline-end-56` | `padding-inline-end: pxToRem(56);` | `padding-inline-end: 3.5rem;` | +| `u-padding-inline-end-120` | `padding-inline-end: pxToRem(120);`| `padding-inline-end: 7.5rem;` | +| | | | +| `u-padding-block-8` | `padding-block: pxToRem(8);` | `padding-block: 0.5rem;` | +| `u-padding-block-12` | `padding-block: pxToRem(12);` | `padding-block: 0.75rem;` | +| | | | +| `u-padding-block-start-16` | `padding-block-start: pxToRem(16);`| `padding-block-start: 1rem;` | +| `u-padding-block-start-20` | `padding-block-start: pxToRem(20);`| `padding-block-start: 1,25rem;`| +| | | | +| `u-padding-block-end-32` | `padding-block-end: pxToRem(32);` | `padding-block-end: 2rem;` | +| `u-padding-block-end-56` | `padding-block-end: pxToRem(56);` | `padding-block-end: 3.5rem;` | +| | | | +| | | | +| `u-margin-16-negative` | `margin: pxToRem(-16);` | `margin: -1rem;` | +| `u-margin-0` | `margin: 0;` | Stays the same | +| `u-margin-32` | `margin: pxToRem(32);` | `margin: 2rem;` | +| | | | +| `u-margin-inline-start-auto` | `margin-inline-start: auto;` | Stays the same | +| `u-margin-block-start-auto` | `margin-block-start: auto;` | Stays the same | +| | | | +| `u-margin-block-start-negative-56` | `margin-block-start: pxToRem(-56);`| `margin-block-start: pxToRem(-56);`| +| | | | +| `u-margin-block-start-2` | `margin-block-start: pxToRem(2);` | `margin-block-start: 0.125rem;` | +| `u-margin-block-start-4` | `margin-block-start: pxToRem(4);` | `margin-block-start: 0.25rem;` | +| `u-margin-block-start-8` | `margin-block-start: pxToRem(8);` | `margin-block-start: 0.5rem;` | +| `u-margin-block-start-12` | `margin-block-start: pxToRem(12);` | `margin-block-start: 0.75rem;` | +| `u-margin-block-start-16` | `margin-block-start: pxToRem(16);` | `margin-block-start: 1rem;` | +| `u-margin-block-start-20` | `margin-block-start: pxToRem(20);` | `margin-block-start: 1.25rem;` | +| `u-margin-block-start-24` | `margin-block-start: pxToRem(24);` | `margin-block-start: 1.5rem;` | +| `u-margin-block-start-32` | `margin-block-start: pxToRem(32);` | `margin-block-start: 2rem;` | +| `u-margin-block-start-40` | `margin-block-start: pxToRem(40);` | `margin-block-start: 2.5rem;` | +| `u-margin-block-start-48` | `margin-block-start: pxToRem(48);` | `margin-block-start: 3rem;` | +| `u-margin-block-start-52` | `margin-block-start: pxToRem(52);` | `margin-block-start: 3.25rem;` | +| `u-margin-block-start-100` | `margin-block-start: pxToRem(100);`| `margin-block-start: 6.25rem;` | +| `u-margin-block-start-200` | `margin-block-start: pxToRem(200);`| `margin-block-start: 12.5rem;` | +| `u-margin-block-start-300` | `margin-block-start: pxToRem(300);`| `margin-block-start: 18.75rem;` | +| | | | +| `u-margin-inline-start-4` | `margin-inline-start: pxToRem(4);` | `margin-inline-start: 0.25rem;` | +| `u-margin-inline-start-8` | `margin-inline-start: pxToRem(8);` | `margin-inline-start: 0.5rem;` | +| `u-margin-inline-start-12` | `margin-inline-start: pxToRem(12);`| `margin-inline-start: 0.75rem;` | +| `u-margin-inline-start-16` | `margin-inline-start: pxToRem(16);`| `margin-inline-start: 1rem;` | +| `u-margin-inline-start-24` | `margin-inline-start: pxToRem(24);`| `margin-inline-start: 1.5rem;` | +| `u-margin-inline-start-32` | `margin-inline-start: pxToRem(32);`| `margin-inline-start: 2rem;` | +| | | | +| `u-margin-inline-end-16` | `margin-inline-end: pxToRem(16);` | `margin-inline-end: 1rem;` | +| `u-margin-inline-end-24` | `margin-inline-end: pxToRem(24);` | `margin-inline-end: 1.5rem;` |
diff --git a/apps/pink/src/pages/utilities/display.mdx b/apps/pink/src/pages/utilities/display.mdx index 6246c11517..93491e97c0 100644 --- a/apps/pink/src/pages/utilities/display.mdx +++ b/apps/pink/src/pages/utilities/display.mdx @@ -15,9 +15,9 @@ description: Display controls how an element is displayed, including its alignme | | | | | `u-box-sizing-content` | `box-sizing: content-box;` | Stays the same | | | | | -| `u-sep-inline-start` | `border-inline-start: solid pxToRem(1) hsl(var(--color-border)) !important;` | `border-inline-start: solid 0.0625rem hsl(var(--color-border)) !important;` | -| `u-sep-block-start` | `border-block-start: solid pxToRem(1) hsl(var(--color-border)) !important;` | `border-block-start: solid 0.0625rem hsl(var(--color-border)) !important;` | -| `u-sep-block-end` | `border-block-end: solid pxToRem(1) hsl(var(--color-border)) !important;` | `border-block-end: solid 0.0625rem hsl(var(--color-border)) !important;` | +| `u-sep-inline-start` | `border-inline-start: solid pxToRem(1) hsl(var(--color-border));` | `border-inline-start: solid 0.0625rem hsl(var(--color-border));` | +| `u-sep-block-start` | `border-block-start: solid pxToRem(1) hsl(var(--color-border));` | `border-block-start: solid 0.0625rem hsl(var(--color-border));` | +| `u-sep-block-end` | `border-block-end: solid pxToRem(1) hsl(var(--color-border));` | `border-block-end: solid 0.0625rem hsl(var(--color-border));` | | | | | | `u-gap-2` | `gap: pxToRem(2);` | `gap: 0.125rem;` | | `u-gap-4` | `gap: pxToRem(4);` | `gap: 0.25rem;` | @@ -53,8 +53,8 @@ description: Display controls how an element is displayed, including its alignme | `u-flex-wrap` | `flex-wrap: wrap;` | Stays the same | | `u-stretch` | `flex: 1;` | Stays the same | | `u-flex-basis-140` | `flex-basis: pxToRem(140);` | `flex-basis: 8.75rem` | -| `u-flex-basis-250` | `flex-basis: pxToRem(250);` | `flex-basis: 15.625rem` | -| `u-flex-basis-500` | `flex-basis: pxToRem(500);` | `flex-basis: 31.25rem` | +| `u-flex-basis-250` | `flex-basis: pxToRem(250);` | `flex-basis: 15.625rem` | +| `u-flex-basis-500` | `flex-basis: pxToRem(500);` | `flex-basis: 31.25rem` | | `u-flex-basis-50-percent` | `flex-basis: 50%;` | Stays the same | | `u-flex-basis-100-percent` | `flex-basis: 100%;` | Stays the same | | `u-flex-shrink-0` | `flex-shrink: 0;` | Stays the same | @@ -86,7 +86,7 @@ description: Display controls how an element is displayed, including its alignme | `u-max-width-100-percent` | `max-inline-size: 100%;` | Stays the same | | | | | | `u-height-100-percent` | `block-size: 100%;` | Stays the same | -| `u-height-auto` | `block-size: auto !important;` | Stays the same | +| `u-height-auto` | `block-size: auto;` | Stays the same | | `u-full-screen-height` | `block-size: 100vh; block-size: 100lvh;` | Stays the same | | | | | | `u-min-height-100` | `min-block-size: pxToRem(100);` | `min-block-size: 6.25rem;` | diff --git a/apps/pink/src/pages/utilities/position.mdx b/apps/pink/src/pages/utilities/position.mdx index 059cce9e4e..e81f025fd1 100644 --- a/apps/pink/src/pages/utilities/position.mdx +++ b/apps/pink/src/pages/utilities/position.mdx @@ -8,7 +8,7 @@ description: An element's position can be quickly configured by using Position c | `u-position-relative` | `position: relative;` | Stays the same | | `u-position-absolute` | `position: absolute;` | Stays the same | | `u-position-fixed ` | `position: fixed;` | Stays the same | -| `u-position-static` | `position: static !important;` | Stays the same | +| `u-position-static` | `position: static;` | Stays the same | | | | | | `u-inset-0` | `inset: 0;` | Stays the same | | | | | diff --git a/apps/pink/src/pages/utilities/responsive.mdx b/apps/pink/src/pages/utilities/responsive.mdx index 965e0adab5..4ede5ca8b4 100644 --- a/apps/pink/src/pages/utilities/responsive.mdx +++ b/apps/pink/src/pages/utilities/responsive.mdx @@ -3,13 +3,13 @@ title: Responsive description: Responsive shows or hides elements depending on the size of the screen. --- -| Class | Properties | -| ------------------ | ----------------------------------------------------------------- | -| `.is-only-mobile` | `@media #{$break2open} { display: none !important; }` | -| `.is-only-tablet` | `@media #{$break1}, #{$break3open} { display: none !important; }` | -| `.is-only-desktop` | `@media #{$break1}, #{$break2} { display: none !important; }` | -| `.is-not-mobile` | `@media #{$break1} { display: none !important; }` | -| `.is-not-desktop` | `@media #{$break3open} { display: none !important; }` | +| Class | Properties | +| ------------------ | ------------------------------------------------------ | +| `.is-only-mobile` | `@media #{$break2open} { display: none; }` | +| `.is-only-tablet` | `@media #{$break1}, #{$break3open} { display: none; }` | +| `.is-only-desktop` | `@media #{$break1}, #{$break2} { display: none; }` | +| `.is-not-mobile` | `@media #{$break1} { display: none; }` | +| `.is-not-desktop` | `@media #{$break3open} { display: none; }` |

I'm visible on mobile

diff --git a/apps/pink/src/pages/utilities/text.mdx b/apps/pink/src/pages/utilities/text.mdx index 03184525af..768a6f1a31 100644 --- a/apps/pink/src/pages/utilities/text.mdx +++ b/apps/pink/src/pages/utilities/text.mdx @@ -5,10 +5,10 @@ description: Text ensures consistent text size, weight, line height and breaks a | Class | Scss Define | Compiled CSS | | -------------------- | ------------------------------------------------- | ------------------------------- | -| `u-x-small` | `font-size: pxToRem(12)!important;` | `font-size: 0.75rem!important;` | -| `u-small` | `font-size: pxToRem(14)!important;` | `font-size: 0.875rem!important;`| -| `u-medium` | `font-size: pxToRem(16)!important;` | `font-size: 1rem!important;` | -| `u-font-size-32` | `font-size: pxToRem(32)!important;` | `font-size: 2rem!important;` | +| `u-x-small` | `font-size: pxToRem(12);` | `font-size: 0.75rem;` | +| `u-small` | `font-size: pxToRem(14);` | `font-size: 0.875rem;` | +| `u-medium` | `font-size: pxToRem(16);` | `font-size: 1rem;` | +| `u-font-size-32` | `font-size: pxToRem(32);` | `font-size: 2rem;` | | `u-bold` | `font-weight: 600;` | Stays the same | | `u-normal` | `font-weight: normal;` | Stays the same | | `u-underline` | `text-decoration: underline;` | Stays the same | @@ -42,7 +42,7 @@ description: Text ensures consistent text size, weight, line height and breaks a | | | `overflow: hidden;` | | | | `word-break: break-all;` | | | | | -| `u-un-break-text` | `white-space: nowrap !important;` | Stays the same | +| `u-un-break-text` | `white-space: nowrap;` | Stays the same | | `u-capitalize` | `text-transform: capitalize;` | Stays the same | | `u-icon-small` | `font-size: var(--icon-size-small);` | Stays the same | | | | | diff --git a/apps/pink/src/pages/utilities/visibility.mdx b/apps/pink/src/pages/utilities/visibility.mdx index f5de35fa8b..64f36e1f1f 100644 --- a/apps/pink/src/pages/utilities/visibility.mdx +++ b/apps/pink/src/pages/utilities/visibility.mdx @@ -3,16 +3,16 @@ title: Visibility description: An element's visibility, opacity and overflow are controlled by the classes below. --- -| Class | Properties | -| -------------------- | ------------------------------- | -| `u-hide` | `display: none !important;` | -| `u-opacity-0` | `opacity: 0 !important;` | -| `u-opacity-20` | `opacity: 0.2 !important;` | -| `u-opacity-50` | `opacity: 0.5 !important;` | -| `u-overflow-hidden` | `overflow: hidden !important;` | -| `u-overflow-visible` | `overflow: visible !important;` | -| `u-overflow-x-auto` | `overflow-x: auto !important;` | -| `u-overflow-y-auto` | `overflow-y: auto !important;` | +| Class | Properties | +| -------------------- | -------------------- | +| `u-hide` | `display: nonet;` | +| `u-opacity-0` | `opacity: 0;` | +| `u-opacity-20` | `opacity: 0.2;` | +| `u-opacity-50` | `opacity: 0.5;` | +| `u-overflow-hidden` | `overflow: hidden;` | +| `u-overflow-visible` | `overflow: visible;` | +| `u-overflow-x-auto` | `overflow-x: auto;` | +| `u-overflow-y-auto` | `overflow-y: auto;` |
From 9ff2b1fad4ec8c7776dfd2e988e5ca88b28206be Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Fri, 9 Jun 2023 06:12:33 +0200 Subject: [PATCH 05/30] Table - New type of list with table view + new demo on table.mdx - New utility class + update documentation - minor style fix --- apps/pink/src/pages/elements/table.mdx | 56 +++++++++++++++++++++ apps/pink/src/pages/utilities/box-model.mdx | 1 + packages/ui/src/6-elements/_table.scss | 2 +- packages/ui/src/_9-utilities.scss | 1 + 4 files changed, 59 insertions(+), 1 deletion(-) diff --git a/apps/pink/src/pages/elements/table.mdx b/apps/pink/src/pages/elements/table.mdx index 9809404b29..919e78fb78 100644 --- a/apps/pink/src/pages/elements/table.mdx +++ b/apps/pink/src/pages/elements/table.mdx @@ -291,6 +291,8 @@ In the Appwrite console, we use three styles of tables:


+## Remove Outer Style Table + | Class | Type | | | ------------------------ | -------------------- | -------------------------------------------------------------------------------- | | `is-remove-outer-styles` | Without Outer Styles | Secondary table - in the Appwrite console used mostly inside a card or a wizard. | @@ -384,10 +386,64 @@ In the Appwrite console, we use three styles of tables:
+ +## Remove Outer Style Table - List with Table View + + +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+


+ + + | Class | Type | | | ------------------ | ------------ | ---------------------------------------------------------------------------------------------------- | | `is-sticky-scroll` | Inner Scroll | Used in case the content of a table exceeds the maximum width and the first column should be sticky. | diff --git a/apps/pink/src/pages/utilities/box-model.mdx b/apps/pink/src/pages/utilities/box-model.mdx index f2a345ae2c..73c8844f68 100644 --- a/apps/pink/src/pages/utilities/box-model.mdx +++ b/apps/pink/src/pages/utilities/box-model.mdx @@ -66,6 +66,7 @@ description: Box Model ensures consistent margins, paddings and borders across o | `u-margin-inline-start-24` | `margin-inline-start: pxToRem(24);`| `margin-inline-start: 1.5rem;` | | `u-margin-inline-start-32` | `margin-inline-start: pxToRem(32);`| `margin-inline-start: 2rem;` | | | | | +| `u-margin-inline-end-8` | `margin-inline-end: pxToRem(8);` | `margin-inline-end: 0.5rem;` | | `u-margin-inline-end-16` | `margin-inline-end: pxToRem(16);` | `margin-inline-end: 1rem;` | | `u-margin-inline-end-24` | `margin-inline-end: pxToRem(24);` | `margin-inline-end: 1.5rem;` | diff --git a/packages/ui/src/6-elements/_table.scss b/packages/ui/src/6-elements/_table.scss index 00df128e37..dcffc03d34 100644 --- a/packages/ui/src/6-elements/_table.scss +++ b/packages/ui/src/6-elements/_table.scss @@ -96,7 +96,7 @@ &.is-table-layout-auto { table-layout:auto; } &.is-remove-outer-styles { - border-width:0; box-shadow:none; outline:none; + border-width:0; box-shadow:none; outline:none; border-radius:initial; :where(.table-thead-col) { padding-inline:0; &:where(:not(:last-child)) { padding-inline-end:pxToRem(8); } diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss index fc002917d6..5bb8949c14 100644 --- a/packages/ui/src/_9-utilities.scss +++ b/packages/ui/src/_9-utilities.scss @@ -292,6 +292,7 @@ .u-margin-inline-start-24 { margin-inline-start:pxToRem(24); } .u-margin-inline-start-32 { margin-inline-start:pxToRem(32); } +.u-margin-inline-end-8 { margin-inline-end:pxToRem(8); } .u-margin-inline-end-16 { margin-inline-end:pxToRem(16); } .u-margin-inline-end-24 { margin-inline-end:pxToRem(24); } From 80d05e1942ae9027828ca18746b93d13c2fd1a60 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Fri, 9 Jun 2023 06:18:31 +0200 Subject: [PATCH 06/30] Table - Small fix url --- apps/pink/src/pages/elements/table.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pink/src/pages/elements/table.mdx b/apps/pink/src/pages/elements/table.mdx index 919e78fb78..05870486d7 100644 --- a/apps/pink/src/pages/elements/table.mdx +++ b/apps/pink/src/pages/elements/table.mdx @@ -397,7 +397,7 @@ In the Appwrite console, we use three styles of tables:
- node + node
repo-name From e1a92e882cd0ffc9bb9added307e7a867b513764 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Fri, 9 Jun 2023 06:20:38 +0200 Subject: [PATCH 07/30] Table - Small fix url --- apps/pink/src/pages/elements/table.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/pink/src/pages/elements/table.mdx b/apps/pink/src/pages/elements/table.mdx index 05870486d7..64443c42e9 100644 --- a/apps/pink/src/pages/elements/table.mdx +++ b/apps/pink/src/pages/elements/table.mdx @@ -411,7 +411,7 @@ In the Appwrite console, we use three styles of tables:
- node + node
repo-name @@ -425,7 +425,7 @@ In the Appwrite console, we use three styles of tables:
- node + node
repo-name From 1e10a38de0d755ff8819f40bee80eeacd7843d29 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 12 Jun 2023 12:08:12 +0100 Subject: [PATCH 08/30] Main Scss file - delete comment --- packages/ui/src/_index.scss | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/ui/src/_index.scss b/packages/ui/src/_index.scss index fd3963caca..0eefa6d432 100644 --- a/packages/ui/src/_index.scss +++ b/packages/ui/src/_index.scss @@ -26,13 +26,3 @@ @layer utilities { @include meta.load-css('9-utilities'); } - -/* old way - before css layers */ -//@use '1-css-variables' as *; -//@use '2-resets' as *; -//@use '4-icons' as *; -//@use '5-animations' as *; -//@use '6-elements' as *; -//@use '7-components' as *; -//@use '8-grids' as *; -//@use '9-utilities' as *; From c9db807f1d35c732bb99f2beee36b4cf154790d4 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Tue, 20 Jun 2023 09:54:13 -0400 Subject: [PATCH 09/30] Border Radius - remove sass variable conversion value --- .../ui/src/1-css-variables/_border-radius.scss | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/1-css-variables/_border-radius.scss b/packages/ui/src/1-css-variables/_border-radius.scss index d58301401b..c0d16441fe 100644 --- a/packages/ui/src/1-css-variables/_border-radius.scss +++ b/packages/ui/src/1-css-variables/_border-radius.scss @@ -1,14 +1,8 @@ @use '../abstract' as *; :root { - - $border-radius-xsmall: #{pxToRem(4)}; - $border-radius-small: #{pxToRem(8)}; - $border-radius-medium: #{pxToRem(16)}; - $border-radius-large: #{pxToRem(24)}; - - --border-radius-xsmall: #{$border-radius-xsmall}; - --border-radius-small: #{$border-radius-small}; - --border-radius-medium: #{$border-radius-medium}; - --border-radius-large: #{$border-radius-large}; + --border-radius-xsmall: #{pxToRem(4)}; + --border-radius-small: #{pxToRem(8)}; + --border-radius-medium: #{pxToRem(16)}; + --border-radius-large: #{pxToRem(24)}; --border-radius-circular: 50%; } \ No newline at end of file From 6d5591c13c41e74fc6cc0c772f3533391a943dcc Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Tue, 20 Jun 2023 09:58:34 -0400 Subject: [PATCH 10/30] Sizes Variables - remove sass variable conversion value - order from small to large --- packages/ui/src/1-css-variables/_sizes.scss | 32 +++++++-------------- 1 file changed, 10 insertions(+), 22 deletions(-) diff --git a/packages/ui/src/1-css-variables/_sizes.scss b/packages/ui/src/1-css-variables/_sizes.scss index 2b3fa5c267..73a586cce5 100644 --- a/packages/ui/src/1-css-variables/_sizes.scss +++ b/packages/ui/src/1-css-variables/_sizes.scss @@ -1,28 +1,16 @@ @use '../abstract' as *; :root { - $size-xxxl: pxToRem(1394); - $size-xxl: pxToRem(1260); - $size-xl: pxToRem(928); - $size-large: pxToRem(700); - $size-medium: pxToRem(496); - $size-small: pxToRem(320); - - --container-size-xxxl: #{$size-xxxl}; - --container-size-xxl: #{$size-xxl}; - --container-size-xl: #{$size-xl}; - --container-size-large: #{$size-large}; - --container-size-medium: #{$size-medium}; - --container-size-small: #{$size-small}; + --container-size-small: #{pxToRem(320)}; + --container-size-medium: #{pxToRem(496)}; + --container-size-large: #{pxToRem(700)}; + --container-size-xl: #{pxToRem(928)}; + --container-size-xxl: #{pxToRem(1260)}; + --container-size-xxxl: #{pxToRem(1394)}; /* icons */ - $icon-size-small: pxToRem(16); - $icon-size-medium: pxToRem(20); /* default */ - $icon-size-large: pxToRem(24); - $icon-size-extra-large: pxToRem(32); - - --icon-size-small: #{$icon-size-small}; - --icon-size-medium: #{$icon-size-medium}; - --icon-size-large: #{$icon-size-large}; - --icon-size-extra-large: #{$icon-size-extra-large}; + --icon-size-small: #{pxToRem(16)}; + --icon-size-medium: #{pxToRem(20)}; /* default */ + --icon-size-large: #{pxToRem(24)}; + --icon-size-extra-large: #{pxToRem(32)}; } \ No newline at end of file From 877e95e1f4f65c8997ff89b93faac8a066d4bf88 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Tue, 20 Jun 2023 10:03:52 -0400 Subject: [PATCH 11/30] Shadow Variables - remove sass variable conversion value - arrange shadow variables --- packages/ui/src/1-css-variables/_common.scss | 9 +-------- packages/ui/src/1-css-variables/_shadows.scss | 16 +++++++--------- 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/packages/ui/src/1-css-variables/_common.scss b/packages/ui/src/1-css-variables/_common.scss index 450d629ef5..677d48f5e3 100644 --- a/packages/ui/src/1-css-variables/_common.scss +++ b/packages/ui/src/1-css-variables/_common.scss @@ -1,12 +1,5 @@ @use '../abstract' as *; /* common CSS native variables */ -:root{ - $box-shadow:0 #{pxToRem(10) pxToRem(10) rgba(0, 0, 0, 0.05)}; - --box-shadow:#{$box-shadow}; - - $focus: 0 0 0 pxToRem(1) hsl(var(--color-information-100)), 0 0 0 pxToRem(4) hsl(var(--color-information-100) / 0.25); - --focus-box-shadow: #{$focus}; - - +:root { --transition:0.2s; } \ No newline at end of file diff --git a/packages/ui/src/1-css-variables/_shadows.scss b/packages/ui/src/1-css-variables/_shadows.scss index 727989ae37..64f3f89d1b 100644 --- a/packages/ui/src/1-css-variables/_shadows.scss +++ b/packages/ui/src/1-css-variables/_shadows.scss @@ -3,19 +3,17 @@ :root { --shadow-color: var(--color-neutral-150); - $shadow-small: pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.02); - --shadow-small: #{$shadow-small}; + --shadow-small: #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.02)}; + --shadow-large: #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.04)}; - $shadow-large: pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.04); - --shadow-large: #{$shadow-large}; + /* focus state shadow */ + $focus: 0 0 0 pxToRem(1) hsl(var(--color-information-100)), 0 0 0 pxToRem(4) hsl(var(--color-information-100) / 0.25); + --focus-box-shadow: #{$focus}; #{$theme-dark} { --shadow-color: var(--color-neutral-500); - $shadow-small: pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.5); - --shadow-small: #{$shadow-small}; - - $shadow-large: pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 1); - --shadow-large: #{$shadow-large}; + --shadow-small: #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.5)}; + --shadow-large: #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 1)}; } } \ No newline at end of file From de89d59a1e99e664ad72ec558152f725b53022f6 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Tue, 20 Jun 2023 10:06:53 -0400 Subject: [PATCH 12/30] Fonts Variables - remove sass variable conversion value --- packages/ui/src/1-css-variables/_fonts.scss | 31 +++++++-------------- 1 file changed, 10 insertions(+), 21 deletions(-) diff --git a/packages/ui/src/1-css-variables/_fonts.scss b/packages/ui/src/1-css-variables/_fonts.scss index ebd868d236..7c97602a2e 100644 --- a/packages/ui/src/1-css-variables/_fonts.scss +++ b/packages/ui/src/1-css-variables/_fonts.scss @@ -4,25 +4,14 @@ --content-font: 'Inter', arial, sans-serif; --code-font: 'Source Code Pro', monospace; - $font-size-00: pxToRem(12); - $font-size-0: pxToRem(14); - $font-size-1: pxToRem(16); - $font-size-2: pxToRem(18); - $font-size-3: pxToRem(20); - $font-size-4: pxToRem(24); - $font-size-5: pxToRem(28); - $font-size-6: pxToRem(32); - $font-size-7: pxToRem(36); - $font-size-8: pxToRem(40); - - --font-size-00: #{$font-size-00}; - --font-size-0: #{$font-size-0}; - --font-size-1: #{$font-size-1}; - --font-size-2: #{$font-size-2}; - --font-size-3: #{$font-size-3}; - --font-size-4: #{$font-size-4}; - --font-size-5: #{$font-size-5}; - --font-size-6: #{$font-size-6}; - --font-size-7: #{$font-size-7}; - --font-size-8: #{$font-size-8}; + --font-size-00: #{pxToRem(12)}; + --font-size-0: #{pxToRem(14)}; + --font-size-1: #{pxToRem(16)}; + --font-size-2: #{pxToRem(18)}; + --font-size-3: #{pxToRem(20)}; + --font-size-4: #{pxToRem(24)}; + --font-size-5: #{pxToRem(28)}; + --font-size-6: #{pxToRem(32)}; + --font-size-7: #{pxToRem(36)}; + --font-size-8: #{pxToRem(40)}; } \ No newline at end of file From 6d3a3000e5efe5a3b0839f43cc40c480ef445d84 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Tue, 20 Jun 2023 14:03:08 -0400 Subject: [PATCH 13/30] Kitchen-sync - New error page demo (1) --- apps/kitchensink/error-not-found-modal.html | 44 +++++++++++++++++++++ apps/kitchensink/vite.config.js | 1 + 2 files changed, 45 insertions(+) create mode 100644 apps/kitchensink/error-not-found-modal.html diff --git a/apps/kitchensink/error-not-found-modal.html b/apps/kitchensink/error-not-found-modal.html new file mode 100644 index 0000000000..01e3bb34e1 --- /dev/null +++ b/apps/kitchensink/error-not-found-modal.html @@ -0,0 +1,44 @@ + + + + + + @appwrite/kitchensink + + + +
+
+
+
+
+

Missing Redirect URL

+ +
+
+
+

Your Oauth sign in flow is missing a proper redirect URL. Send a request for a new session with a valid callback URL.

+
    +
  • + + DEPLOYMENT_NOT_FOUND +
    • +
+
+ + +
+
+
+
+
+ + + + diff --git a/apps/kitchensink/vite.config.js b/apps/kitchensink/vite.config.js index f5ffa53851..b91951cca3 100644 --- a/apps/kitchensink/vite.config.js +++ b/apps/kitchensink/vite.config.js @@ -37,6 +37,7 @@ const config = { gettingStarted: new URL("./getting-started.html", import.meta.url).pathname, modalDemo: new URL("./modal-demo.html", import.meta.url).pathname, filters: new URL("./filters.html", import.meta.url).pathname, + errorNotFoundModal: new URL("./error-not-found-modal.html", import.meta.url).pathname, }, }, }, From 42014a984654b0b0c128aa1a0b92a058275b91d6 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Tue, 20 Jun 2023 14:10:52 -0400 Subject: [PATCH 14/30] Side-Nav - bug fix when side nam level-2 is open --- packages/ui/src/7-components/_side-nav.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/src/7-components/_side-nav.scss b/packages/ui/src/7-components/_side-nav.scss index 1b613048fb..57803cfa24 100644 --- a/packages/ui/src/7-components/_side-nav.scss +++ b/packages/ui/src/7-components/_side-nav.scss @@ -17,6 +17,7 @@ &.is-narrow { @media #{$break3open} { inline-size: pxToRem(72); + .drop-section { padding-inline-end:pxToRem(8); } } } } From 4b896d911ebfe5fc35f93eab0c6b6a230d8a3848 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Tue, 20 Jun 2023 14:23:57 -0400 Subject: [PATCH 15/30] Error Page (2) - new demo kitchen-sync - new utility class --- apps/kitchensink/error-console-page.html | 43 +++++++++++++++++++++ apps/kitchensink/vite.config.js | 1 + apps/pink/src/pages/utilities/box-model.mdx | 3 +- packages/ui/src/_9-utilities.scss | 3 +- 4 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 apps/kitchensink/error-console-page.html diff --git a/apps/kitchensink/error-console-page.html b/apps/kitchensink/error-console-page.html new file mode 100644 index 0000000000..9b25c625d5 --- /dev/null +++ b/apps/kitchensink/error-console-page.html @@ -0,0 +1,43 @@ + + + + + + @appwrite/kitchensink - user demo + + + +
+ {{> topNav}} +
+
+
+ +
+
+
+
+
+
+
+

Organization not found

+
+
+
+

The organization with the requested ID could not be found.

+
+ +
+
+
+
+
+ +
+
+
+ + + diff --git a/apps/kitchensink/vite.config.js b/apps/kitchensink/vite.config.js index b91951cca3..f0d564d1a4 100644 --- a/apps/kitchensink/vite.config.js +++ b/apps/kitchensink/vite.config.js @@ -38,6 +38,7 @@ const config = { modalDemo: new URL("./modal-demo.html", import.meta.url).pathname, filters: new URL("./filters.html", import.meta.url).pathname, errorNotFoundModal: new URL("./error-not-found-modal.html", import.meta.url).pathname, + errorConsolePage: new URL("./error-console-page.html", import.meta.url).pathname, }, }, }, diff --git a/apps/pink/src/pages/utilities/box-model.mdx b/apps/pink/src/pages/utilities/box-model.mdx index 73c8844f68..812888be1f 100644 --- a/apps/pink/src/pages/utilities/box-model.mdx +++ b/apps/pink/src/pages/utilities/box-model.mdx @@ -42,7 +42,8 @@ description: Box Model ensures consistent margins, paddings and borders across o | `u-margin-inline-start-auto` | `margin-inline-start: auto;` | Stays the same | | `u-margin-block-start-auto` | `margin-block-start: auto;` | Stays the same | | | | | -| `u-margin-block-start-negative-56` | `margin-block-start: pxToRem(-56);`| `margin-block-start: pxToRem(-56);`| +| `u-margin-block-start-negative-56` | `margin-block-start: pxToRem(-56);`| `margin-block-start: -3.5rem;`| +| `u-margin-block-start-negative-168`| `margin-block-start: pxToRem(-168);`| `margin-block-start: -10.5rem;`| | | | | | `u-margin-block-start-2` | `margin-block-start: pxToRem(2);` | `margin-block-start: 0.125rem;` | | `u-margin-block-start-4` | `margin-block-start: pxToRem(4);` | `margin-block-start: 0.25rem;` | diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss index 5bb8949c14..5b66b2f0f9 100644 --- a/packages/ui/src/_9-utilities.scss +++ b/packages/ui/src/_9-utilities.scss @@ -268,7 +268,8 @@ .u-margin-inline-start-auto { margin-inline-start:auto; } .u-margin-block-start-auto { margin-block-start:auto; } -.u-margin-block-start-negative-56 { margin-block-start:pxToRem(-56); } +.u-margin-block-start-negative-56 { margin-block-start:pxToRem(-56); } +.u-margin-block-start-negative-168 { margin-block-start:pxToRem(-168); } .u-margin-block-start-2 { margin-block-start:pxToRem(2); } .u-margin-block-start-4 { margin-block-start:pxToRem(4); } From 83fe0bb71cf744730fb1c76f55c47b4013c4b370 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 21 Jun 2023 12:57:00 -0400 Subject: [PATCH 16/30] fix spaces --- packages/ui/src/1-css-variables/_common.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/1-css-variables/_common.scss b/packages/ui/src/1-css-variables/_common.scss index 677d48f5e3..a5057055ad 100644 --- a/packages/ui/src/1-css-variables/_common.scss +++ b/packages/ui/src/1-css-variables/_common.scss @@ -1,5 +1,5 @@ @use '../abstract' as *; /* common CSS native variables */ :root { - --transition:0.2s; + --transition: 0.2s; } \ No newline at end of file From f0d51f25aeab377271fc7652eb7e6915159fb56d Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Tue, 25 Jul 2023 16:48:35 -0600 Subject: [PATCH 17/30] Utilities Classes - update to be most of them with !important rule --- apps/pink/src/pages/utilities/box-model.mdx | 141 +++--- apps/pink/src/pages/utilities/colors.mdx | 24 +- apps/pink/src/pages/utilities/cursor.mdx | 6 +- apps/pink/src/pages/utilities/display.mdx | 206 ++++---- apps/pink/src/pages/utilities/position.mdx | 92 ++-- apps/pink/src/pages/utilities/responsive.mdx | 14 +- apps/pink/src/pages/utilities/text.mdx | 50 +- apps/pink/src/pages/utilities/theme.mdx | 12 +- apps/pink/src/pages/utilities/visibility.mdx | 20 +- packages/ui/src/_9-utilities.scss | 498 +++++++++---------- 10 files changed, 532 insertions(+), 531 deletions(-) diff --git a/apps/pink/src/pages/utilities/box-model.mdx b/apps/pink/src/pages/utilities/box-model.mdx index 812888be1f..505021f8c9 100644 --- a/apps/pink/src/pages/utilities/box-model.mdx +++ b/apps/pink/src/pages/utilities/box-model.mdx @@ -3,74 +3,79 @@ title: Box Model description: Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation. --- -| Class | Scss Define | Compiled CSS | -| ---------------------------------- | ---------------------------------- | ----------------------------- | -| `u-padding-0` | `padding: 0;` | Stays the same | -| `u-padding-8` | `padding: pxToRem(8);` | `padding: 0.5rem;` | -| `u-padding-12` | `padding: pxToRem(12);` | `padding: 0.75rem;` | -| `u-padding-16` | `padding: pxToRem(16);` | `padding: 1rem;` | -| `u-padding-24` | `padding: pxToRem(24);` | `padding: 1.5rem;` | -| `u-padding-32` | `padding: pxToRem(32);` | `padding: 2rem;` | -| `u-padding-64` | `padding: pxToRem(64);` | `padding: 4rem;` | -| | | | -| `u-padding-inline-0` | `padding-inline: 0;` | Stays the same | -| `u-padding-inline-8` | `padding-inline: pxToRem(8);` | `padding-inline: 0.5rem;` | -| `u-padding-inline-12` | `padding-inline: pxToRem(12);` | `padding-inline: 0.75rem;` | -| `u-padding-inline-16` | `padding-inline: pxToRem(16);` | `padding-inline: 1rem;` | -| `u-padding-inline-24` | `padding-inline: pxToRem(24);` | `padding-inline: 1.5rem;` | -| `u-padding-inline-32` | `padding-inline: pxToRem(32);` | `padding-inline: 2rem;` | -| | | | -| `u-padding-inline-end-0` | `padding-inline-end: 0;` | Stays the same | -| `u-padding-inline-end-12` | `padding-inline-end: pxToRem(12);` | `padding-inline-end: 0.75rem;`| -| `u-padding-inline-end-56` | `padding-inline-end: pxToRem(56);` | `padding-inline-end: 3.5rem;` | -| `u-padding-inline-end-120` | `padding-inline-end: pxToRem(120);`| `padding-inline-end: 7.5rem;` | -| | | | -| `u-padding-block-8` | `padding-block: pxToRem(8);` | `padding-block: 0.5rem;` | -| `u-padding-block-12` | `padding-block: pxToRem(12);` | `padding-block: 0.75rem;` | -| | | | -| `u-padding-block-start-16` | `padding-block-start: pxToRem(16);`| `padding-block-start: 1rem;` | -| `u-padding-block-start-20` | `padding-block-start: pxToRem(20);`| `padding-block-start: 1,25rem;`| -| | | | -| `u-padding-block-end-32` | `padding-block-end: pxToRem(32);` | `padding-block-end: 2rem;` | -| `u-padding-block-end-56` | `padding-block-end: pxToRem(56);` | `padding-block-end: 3.5rem;` | -| | | | -| | | | -| `u-margin-16-negative` | `margin: pxToRem(-16);` | `margin: -1rem;` | -| `u-margin-0` | `margin: 0;` | Stays the same | -| `u-margin-32` | `margin: pxToRem(32);` | `margin: 2rem;` | -| | | | -| `u-margin-inline-start-auto` | `margin-inline-start: auto;` | Stays the same | -| `u-margin-block-start-auto` | `margin-block-start: auto;` | Stays the same | -| | | | -| `u-margin-block-start-negative-56` | `margin-block-start: pxToRem(-56);`| `margin-block-start: -3.5rem;`| -| `u-margin-block-start-negative-168`| `margin-block-start: pxToRem(-168);`| `margin-block-start: -10.5rem;`| -| | | | -| `u-margin-block-start-2` | `margin-block-start: pxToRem(2);` | `margin-block-start: 0.125rem;` | -| `u-margin-block-start-4` | `margin-block-start: pxToRem(4);` | `margin-block-start: 0.25rem;` | -| `u-margin-block-start-8` | `margin-block-start: pxToRem(8);` | `margin-block-start: 0.5rem;` | -| `u-margin-block-start-12` | `margin-block-start: pxToRem(12);` | `margin-block-start: 0.75rem;` | -| `u-margin-block-start-16` | `margin-block-start: pxToRem(16);` | `margin-block-start: 1rem;` | -| `u-margin-block-start-20` | `margin-block-start: pxToRem(20);` | `margin-block-start: 1.25rem;` | -| `u-margin-block-start-24` | `margin-block-start: pxToRem(24);` | `margin-block-start: 1.5rem;` | -| `u-margin-block-start-32` | `margin-block-start: pxToRem(32);` | `margin-block-start: 2rem;` | -| `u-margin-block-start-40` | `margin-block-start: pxToRem(40);` | `margin-block-start: 2.5rem;` | -| `u-margin-block-start-48` | `margin-block-start: pxToRem(48);` | `margin-block-start: 3rem;` | -| `u-margin-block-start-52` | `margin-block-start: pxToRem(52);` | `margin-block-start: 3.25rem;` | -| `u-margin-block-start-100` | `margin-block-start: pxToRem(100);`| `margin-block-start: 6.25rem;` | -| `u-margin-block-start-200` | `margin-block-start: pxToRem(200);`| `margin-block-start: 12.5rem;` | -| `u-margin-block-start-300` | `margin-block-start: pxToRem(300);`| `margin-block-start: 18.75rem;` | -| | | | -| `u-margin-inline-start-4` | `margin-inline-start: pxToRem(4);` | `margin-inline-start: 0.25rem;` | -| `u-margin-inline-start-8` | `margin-inline-start: pxToRem(8);` | `margin-inline-start: 0.5rem;` | -| `u-margin-inline-start-12` | `margin-inline-start: pxToRem(12);`| `margin-inline-start: 0.75rem;` | -| `u-margin-inline-start-16` | `margin-inline-start: pxToRem(16);`| `margin-inline-start: 1rem;` | -| `u-margin-inline-start-24` | `margin-inline-start: pxToRem(24);`| `margin-inline-start: 1.5rem;` | -| `u-margin-inline-start-32` | `margin-inline-start: pxToRem(32);`| `margin-inline-start: 2rem;` | -| | | | -| `u-margin-inline-end-8` | `margin-inline-end: pxToRem(8);` | `margin-inline-end: 0.5rem;` | -| `u-margin-inline-end-16` | `margin-inline-end: pxToRem(16);` | `margin-inline-end: 1rem;` | -| `u-margin-inline-end-24` | `margin-inline-end: pxToRem(24);` | `margin-inline-end: 1.5rem;` | - +| Class | Scss Define | Compiled CSS | +| ---------------------------------- | -------------------------------------------- | --------------------------------------- | +| `u-padding-0` | `padding: 0!important;` | Stays the same | +| `u-padding-8` | `padding: pxToRem(8)!important;` | `padding: 0.5rem!important;` | +| `u-padding-12` | `padding: pxToRem(12)!important;` | `padding: 0.75rem!important;` | +| `u-padding-16` | `padding: pxToRem(16)!important;` | `padding: 1rem!important;` | +| `u-padding-24` | `padding: pxToRem(24)!important;` | `padding: 1.5rem!important;` | +| `u-padding-32` | `padding: pxToRem(32)!important;` | `padding: 2rem!important;` | +| `u-padding-64` | `padding: pxToRem(64)!important;` | `padding: 4rem!important;` | +| | | | +| `u-padding-inline-0` | `padding-inline: 0!important;` | Stays the same | +| `u-padding-inline-8` | `padding-inline: pxToRem(8)!important;` | `padding-inline: 0.5rem!important;` | +| `u-padding-inline-12` | `padding-inline: pxToRem(12)!important;` | `padding-inline: 0.75rem!important;` | +| `u-padding-inline-16` | `padding-inline: pxToRem(16)!important;` | `padding-inline: 1rem!important;` | +| `u-padding-inline-24` | `padding-inline: pxToRem(24)!important;` | `padding-inline: 1.5rem!important;` | +| `u-padding-inline-32` | `padding-inline: pxToRem(32)!important;` | `padding-inline: 2rem!important;` | +| | | | +| `u-padding-inline-end-0` | `padding-inline-end: 0!important;` | Stays the same | +| `u-padding-inline-end-12` | `padding-inline-end: pxToRem(12)!important;` | `padding-inline-end: 0.75rem!important;`| +| `u-padding-inline-end-56` | `padding-inline-end: pxToRem(56)!important;` | `padding-inline-end: 3.5rem!important;` | +| `u-padding-inline-end-120` | `padding-inline-end: pxToRem(120)!important;`| `padding-inline-end: 7.5rem!important;` | +| | | | +| `u-padding-block-8` | `padding-block: pxToRem(8)!important;` | `padding-block: 0.5rem!important;` | +| `u-padding-block-12` | `padding-block: pxToRem(12)!important;` | `padding-block: 0.75rem!important;` | +| | | | +| `u-padding-block-start-16` | `padding-block-start: pxToRem(16)!important;`| `padding-block-start: 1rem!important;` | +| `u-padding-block-start-20` | `padding-block-start: pxToRem(20)!important;`| `padding-block-start: 1,25rem!important;`| +| | | | +| `u-padding-block-end-32` | `padding-block-end: pxToRem(32)!important;` | `padding-block-end: 2rem!important;` | +| `u-padding-block-end-56` | `padding-block-end: pxToRem(56)!important;` | `padding-block-end: 3.5rem!important;` | +| | | | +| | | | +| `u-margin-auto` | `margin: auto!important;` | Stays the same | +| `u-margin-0` | `margin: 0;!important` | Stays the same | +| `u-margin-16-negative` | `margin: pxToRem(-16)!important;` | `margin: -1rem!important;` | +| `u-margin-32` | `margin: pxToRem(32)!important;` | `margin: 2rem!important;` | +| | | | +| `u-margin-inline-auto` | `margin-inline: auto!important;` | Stays the same | +| `u-margin-inline-start-auto` | `margin-inline-start: auto!important;` | Stays the same | +| `u-margin-block-start-auto` | `margin-block-start: auto!important;` | Stays the same | +| | | | +| `u-margin-block-start-negative-56` | `margin-block-start: pxToRem(-56)!important;`| `margin-block-start: -3.5rem!important;`| +| `u-margin-block-start-negative-168`| `margin-block-start: pxToRem(-168)!important;`| `margin-block-start: -10.5rem!important;`| +| | | | +| `u-margin-block-start-2` | `margin-block-start: pxToRem(2)!important;` | `margin-block-start: 0.125rem!important;`| +| `u-margin-block-start-4` | `margin-block-start: pxToRem(4)!important;` | `margin-block-start: 0.25rem!important;` | +| `u-margin-block-start-8` | `margin-block-start: pxToRem(8)!important;` | `margin-block-start: 0.5rem!important;` | +| `u-margin-block-start-12` | `margin-block-start: pxToRem(12)!important;` | `margin-block-start: 0.75rem!important;` | +| `u-margin-block-start-16` | `margin-block-start: pxToRem(16)!important;` | `margin-block-start: 1rem!important;` | +| `u-margin-block-start-20` | `margin-block-start: pxToRem(20)!important;` | `margin-block-start: 1.25rem!important;` | +| `u-margin-block-start-24` | `margin-block-start: pxToRem(24)!important;` | `margin-block-start: 1.5rem!important;` | +| `u-margin-block-start-32` | `margin-block-start: pxToRem(32)!important;` | `margin-block-start: 2rem!important;` | +| `u-margin-block-start-40` | `margin-block-start: pxToRem(40)!important;` | `margin-block-start: 2.5rem!important;` | +| `u-margin-block-start-48` | `margin-block-start: pxToRem(48)!important;` | `margin-block-start: 3rem!important;` | +| `u-margin-block-start-52` | `margin-block-start: pxToRem(52)!important;` | `margin-block-start: 3.25rem!important;` | +| `u-margin-block-start-100` | `margin-block-start: pxToRem(100)!important;`| `margin-block-start: 6.25rem!important;` | +| `u-margin-block-start-200` | `margin-block-start: pxToRem(200)!important;`| `margin-block-start: 12.5rem!important;` | +| `u-margin-block-start-300` | `margin-block-start: pxToRem(300)!important;`| `margin-block-start: 18.75rem!important;`| +| | | | +| `u-margin-inline-start-4` | `margin-inline-start: pxToRem(4)!important;` | `margin-inline-start: 0.25rem!important;`| +| `u-margin-inline-start-8` | `margin-inline-start: pxToRem(8)!important;` | `margin-inline-start: 0.5rem!important;` | +| `u-margin-inline-start-12` | `margin-inline-start: pxToRem(12)!important;`| `margin-inline-start: 0.75rem!important;`| +| `u-margin-inline-start-16` | `margin-inline-start: pxToRem(16)!important;`| `margin-inline-start: 1rem!important;` | +| `u-margin-inline-start-24` | `margin-inline-start: pxToRem(24)!important;`| `margin-inline-start: 1.5rem!important;` | +| `u-margin-inline-start-32` | `margin-inline-start: pxToRem(32)!important;`| `margin-inline-start: 2rem!important;` | +| | | | +| `u-margin-inline-end-8` | `margin-inline-end: pxToRem(8)!important;` | `margin-inline-end: 0.5rem!important;` | +| `u-margin-inline-end-16` | `margin-inline-end: pxToRem(16)!important;` | `margin-inline-end: 1rem!important;` | +| `u-margin-inline-end-24` | `margin-inline-end: pxToRem(24)!important;` | `margin-inline-end: 1.5rem!important;` | +| `u-margin-inline-start-32` | `margin-inline-start: pxToRem(32)!important;`| `margin-inline-start: 2rem!important;` | +| | | | +| `u-border-width-0` | `border-width:0!important;` | Stays the same | +| `u-mobile-border-width-0` | `@media #{$break1} { border-width:0!important;}`| `@media (max-width:767.99px) { border-width:0!important; }` |
diff --git a/apps/pink/src/pages/utilities/colors.mdx b/apps/pink/src/pages/utilities/colors.mdx index ec57f47ebf..35ff734e6b 100644 --- a/apps/pink/src/pages/utilities/colors.mdx +++ b/apps/pink/src/pages/utilities/colors.mdx @@ -7,20 +7,20 @@ description: Colors utility classes help to convey consistent meaning through co In the Appwrite console we use six classes to set system colors based on states: -| Class | Properties | -| ------------ | ---------------------------------------------------- | -| `u-color-text-disabled` | `color: hsl(var(--color-text-disabled));` | -| `u-color-text-offline` | `color: hsl(var(--color-text-offline));` | -| `u-color-text-info` | `color: hsl(var(--color-text-info));` | -| `u-color-text-danger` | `color: hsl(var(--color-text-danger));` | -| `u-color-text-warning` | `color: hsl(var(--color-text-warning));` | -| `u-color-text-success` | `color: hsl(var(--color-text-success));` | +| Class | Properties | +| ------------ | -------------------------------------------------------------- | +| `u-color-text-disabled` | `color: hsl(var(--color-text-disabled))!important;` | +| `u-color-text-offline` | `color: hsl(var(--color-text-offline))!important;` | +| `u-color-text-info` | `color: hsl(var(--color-text-info))!important;` | +| `u-color-text-danger` | `color: hsl(var(--color-text-danger))!important;` | +| `u-color-text-warning` | `color: hsl(var(--color-text-warning))!important;` | +| `u-color-text-success` | `color: hsl(var(--color-text-success))!important;` | ## Text Colors -| Class | Properties | -| ------------ | ---------------------------------------------------- | -| `u-color-text-gray` | `color: hsl(var(--color-text-gray));` | -| `u-color-text-pink` | `color: hsl(var(--color-pink-text));` | +| Class | Properties | +| ------------ | -------------------------------------------------------------- | +| `u-color-text-gray` | `color: hsl(var(--color-text-gray))!important;` | +| `u-color-text-pink` | `color: hsl(var(--color-pink-text))!important;` | diff --git a/apps/pink/src/pages/utilities/cursor.mdx b/apps/pink/src/pages/utilities/cursor.mdx index 62f988a0b7..618525d068 100644 --- a/apps/pink/src/pages/utilities/cursor.mdx +++ b/apps/pink/src/pages/utilities/cursor.mdx @@ -3,9 +3,9 @@ title: Cursor description: Utility class for cursor --- -| Class | Properties | -| -------------------- | ------------------------------- | -| `u-cursor-pointer` | `cursor:pointer;` | +| Class | Properties | +| -------------------- | ----------------------------------------- | +| `u-cursor-pointer` | `cursor:pointer!important;` |

this text will now have cursor

diff --git a/apps/pink/src/pages/utilities/display.mdx b/apps/pink/src/pages/utilities/display.mdx index 93491e97c0..cf88829c36 100644 --- a/apps/pink/src/pages/utilities/display.mdx +++ b/apps/pink/src/pages/utilities/display.mdx @@ -3,116 +3,112 @@ title: Display description: Display controls how an element is displayed, including its alignment, spacing and size. --- -| Class | Scss Definition | Compiled CSS | -| -------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------- | -| `u-block` | `display: block;` | Stays the same | -| `u-inline` | `display: inline;` | Stays the same | -| `u-grid` | `display: grid;` | Stays the same | -| `u-flex` | `display: flex;` | Stays the same | -| `u-inline-flex` | `display: inline-flex;` | Stays the same | -| `u-contents` | `display: contents;` | Stays the same | -| `u-contents-mobile` | `@media #{$break1} { {display: contents;} }` | `@media (max-width:767.99px) { display: contents; }` | -| | | | -| `u-box-sizing-content` | `box-sizing: content-box;` | Stays the same | -| | | | -| `u-sep-inline-start` | `border-inline-start: solid pxToRem(1) hsl(var(--color-border));` | `border-inline-start: solid 0.0625rem hsl(var(--color-border));` | -| `u-sep-block-start` | `border-block-start: solid pxToRem(1) hsl(var(--color-border));` | `border-block-start: solid 0.0625rem hsl(var(--color-border));` | -| `u-sep-block-end` | `border-block-end: solid pxToRem(1) hsl(var(--color-border));` | `border-block-end: solid 0.0625rem hsl(var(--color-border));` | -| | | | -| `u-gap-2` | `gap: pxToRem(2);` | `gap: 0.125rem;` | -| `u-gap-4` | `gap: pxToRem(4);` | `gap: 0.25rem;` | -| `u-gap-8` | `gap: pxToRem(8);` | `gap: 0.5rem;` | -| `u-gap-12` | `gap: pxToRem(12);` | `gap: 0.75rem;` | -| `u-gap-16` | `gap: pxToRem(16);` | `gap: 1rem;` | -| `u-gap-24` | `gap: pxToRem(24);` | `gap: 1.5rem;` | -| `u-gap-32` | `gap: pxToRem(32);` | `gap: 2eem;` | -| | | | -| `u-column-gap-2` | `column-gap: pxToRem(2);` | `column-gap: 0.125rem;` | -| `u-column-gap-4` | `column-gap: pxToRem(4);` | `column-gap: 0.25rem;` | -| `u-column-gap-8` | `column-gap: pxToRem(8);` | `column-gap: 0.5rem;` | -| `u-column-gap-12` | `column-gap: pxToRem(12);` | `column-gap: 0.75rem;` | -| `u-column-gap-16` | `column-gap: pxToRem(16);` | `column-gap: 1rem;` | -| `u-column-gap-24` | `column-gap: pxToRem(24);` | `column-gap: 1.5rem;` | -| `u-column-gap-32` | `column-gap: pxToRem(32);` | `column-gap: 2rem;` | -| | | | -| `u-row-gap-2` | `row-gap: pxToRem(2);` | `row-gap: 0.125rem;` | -| `u-row-gap-4` | `row-gap: pxToRem(4);` | `row-gap: 0.25rem;` | -| `u-row-gap-8` | `row-gap: pxToRem(8);` | `row-gap: 0.5rem;` | -| `u-row-gap-12` | `row-gap: pxToRem(12);` | `row-gap: 0.75rem;` | -| `u-row-gap-16` | `row-gap: pxToRem(16);` | `row-gap: 1rem;` | -| `u-row-gap-24` | `row-gap: pxToRem(24);` | `row-gap: 1.5rem;` | -| `u-row-gap-32` | `row-gap: pxToRem(32);` | `row-gap: 2rem;` | -| | | | -| `u-row-gap-8` | `row-gap: pxToRem(8);` | `row-gap: 0.5rem;` | -| `u-row-gap-12` | `row-gap: pxToRem(12);` | `row-gap: 0.75rem;` | -| `u-row-gap-16` | `row-gap: pxToRem(16);` | `row-gap: 1rem;` | -| `u-row-gap-24` | `row-gap: pxToRem(24);` | `row-gap: 1.5rem;` | -| | | | -| `u-flex-vertical` | `display:flex; flex-direction: column;` | Stays the same | -| `u-flex-vertical-mobile` | `@media #{$break1} { flex-direction:column; }` | `@media (max-width:767.99px) { flex-direction:column; }` | -| `u-flex-wrap` | `flex-wrap: wrap;` | Stays the same | -| `u-stretch` | `flex: 1;` | Stays the same | -| `u-flex-basis-140` | `flex-basis: pxToRem(140);` | `flex-basis: 8.75rem` | -| `u-flex-basis-250` | `flex-basis: pxToRem(250);` | `flex-basis: 15.625rem` | -| `u-flex-basis-500` | `flex-basis: pxToRem(500);` | `flex-basis: 31.25rem` | -| `u-flex-basis-50-percent` | `flex-basis: 50%;` | Stays the same | -| `u-flex-basis-100-percent` | `flex-basis: 100%;` | Stays the same | -| `u-flex-shrink-0` | `flex-shrink: 0;` | Stays the same | -| `u-flex-basis-auto` | `flex-basis: auto;` | Stays the same | -| | | | -| `u-grid-columns-auto-1fr` | `grid-template-columns: auto 1fr;` | Stays the same | -| | | | -| `u-width-full-line` | `inline-size: 100%;` | Stays the same | -| `u-width-140` | `inline-size: pxToRem(140);` | `inline-size: 8.75rem;` | -| `u-width-150` | `inline-size: pxToRem(150);` | `inline-size: 9.375rem;` | -| `u-width-200` | `inline-size: pxToRem(200);` | `inline-size: 12.5rem;` | -| `u-width-250` | `inline-size: pxToRem(250);` | `inline-size: 15.625rem;` | -| `u-width-600` | `inline-size: pxToRem(600);` | `inline-size: 37.5rem;` | -| `u-width-280-desktop` | `@media #{$break3open} { inline-size: pxToRem(280); }` | `@media (min-width:1199px) { inline-size: 17.25rem; }` | -| | | | -| `u-min-width-0` | `min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/` | Stays the same | -| `u-min-width-200` | `min-inline-size: pxToRem(200); ` | `min-inline-size: 25rem;` | -| `u-min-width-100-percent` | `min-inline-size: 100%;` | Stays the same | -| | | | -| `u-max-width-250` | `max-inline-size: pxToRem(250);` | `max-inline-size: 15.625rem;` | -| `u-max-width-300` | `max-inline-size: pxToRem(300);` | `max-inline-size: 18.75rem;` | -| `u-max-width-350` | `max-inline-size: pxToRem(350);` | `max-inline-size: 21.875rem;` | -| `u-max-width-400` | `max-inline-size: pxToRem(400);` | `max-inline-size: 25rem;` | -| `u-max-width-450` | `max-inline-size: pxToRem(450);` | `max-inline-size: 28.125rem;` | -| `u-max-width-500` | `max-inline-size: pxToRem(500);` | `max-inline-size: 31.25rem;` | -| `u-max-width-600` | `max-inline-size: pxToRem(600);` | `max-inline-size: 37.5rem;` | -| `u-max-width-650` | `max-inline-size: pxToRem(650);` | `max-inline-size: 40.625rem;` | -| `u-max-width-700` | `max-inline-size: pxToRem(700);` | `max-inline-size: 43.75rem;` | -| `u-max-width-100-percent` | `max-inline-size: 100%;` | Stays the same | -| | | | -| `u-height-100-percent` | `block-size: 100%;` | Stays the same | -| `u-height-auto` | `block-size: auto;` | Stays the same | -| `u-full-screen-height` | `block-size: 100vh; block-size: 100lvh;` | Stays the same | -| | | | -| `u-min-height-100` | `min-block-size: pxToRem(100);` | `min-block-size: 6.25rem;` | -| `u-min-height-184` | `min-block-size: pxToRem(184);` | `min-block-size: 11.5rem;` | -| `u-min-height-100-percent` | `min-block-size:100%;` | Stays the same | -| | | | -| `u-max-height-200` | `max-block-size: pxToRem(200);` | `max-block-size: 12.5rem;` | +| Class | Scss Definition | Compiled CSS | +| -------------------------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | +| `u-block` | `display: block!important;` | Stays the same | +| `u-inline` | `display: inline!important;` | Stays the same | +| `u-grid` | `display: grid!important;` | Stays the same | +| `u-flex` | `display: flex!important;` | Stays the same | +| `u-inline-flex` | `display: inline-flex!important;` | Stays the same | +| `u-contents` | `display: contents!important;` | Stays the same | +| `u-contents-mobile` | `@media #{$break1} { {display: contents!important;} }` | `@media (max-width:767.99px) { display: contents!important; }` | +| | | | +| `u-box-sizing-content` | `box-sizing: content-box!important;` | Stays the same | +| | | | +| `u-sep-inline-start` | `border-inline-start: solid pxToRem(1) hsl(var(--color-border))!important;` | `border-inline-start: solid 0.0625rem hsl(var(--color-border))!important;` | +| `u-sep-block-start` | `border-block-start: solid pxToRem(1) hsl(var(--color-border))!important;` | `border-block-start: solid 0.0625rem hsl(var(--color-border))!important;` | +| `u-sep-block-end` | `border-block-end: solid pxToRem(1) hsl(var(--color-border))!important;` | `border-block-end: solid 0.0625rem hsl(var(--color-border))!important;` | +| | | | +| `u-gap-2` | `gap: pxToRem(2)!important;` | `gap: 0.125rem!important;` | +| `u-gap-4` | `gap: pxToRem(4)!important;` | `gap: 0.25rem!important;` | +| `u-gap-8` | `gap: pxToRem(8)!important;` | `gap: 0.5rem!important;` | +| `u-gap-12` | `gap: pxToRem(12)!important;` | `gap: 0.75rem!important;` | +| `u-gap-16` | `gap: pxToRem(16)!important;` | `gap: 1rem!important;` | +| `u-gap-24` | `gap: pxToRem(24)!important;` | `gap: 1.5rem!important;` | +| `u-gap-32` | `gap: pxToRem(32)!important;` | `gap: 2eem!important;` | +| | | | +| `u-column-gap-2` | `column-gap: pxToRem(2)!important;` | `column-gap: 0.125rem!important;` | +| `u-column-gap-4` | `column-gap: pxToRem(4)!important;` | `column-gap: 0.25rem!important;` | +| `u-column-gap-8` | `column-gap: pxToRem(8)!important;` | `column-gap: 0.5rem!important;` | +| `u-column-gap-12` | `column-gap: pxToRem(12)!important;` | `column-gap: 0.75rem!important;` | +| `u-column-gap-16` | `column-gap: pxToRem(16)!important;` | `column-gap: 1rem!important;` | +| `u-column-gap-24` | `column-gap: pxToRem(24)!important;` | `column-gap: 1.5rem!important;` | +| `u-column-gap-32` | `column-gap: pxToRem(32)!important;` | `column-gap: 2rem!important;` | +| | | | +| `u-row-gap-2` | `row-gap: pxToRem(2)!important;` | `row-gap: 0.125rem!important;` | +| `u-row-gap-4` | `row-gap: pxToRem(4)!important;` | `row-gap: 0.25rem!important;` | +| `u-row-gap-8` | `row-gap: pxToRem(8)!important;` | `row-gap: 0.5rem!important;` | +| `u-row-gap-12` | `row-gap: pxToRem(12)!important;` | `row-gap: 0.75rem!important;` | +| `u-row-gap-16` | `row-gap: pxToRem(16)!important;` | `row-gap: 1rem!important;` | +| `u-row-gap-24` | `row-gap: pxToRem(24)!important;` | `row-gap: 1.5rem!important;` | +| `u-row-gap-32` | `row-gap: pxToRem(32)!important;` | `row-gap: 2rem!important;` | +| | | | +| `u-flex-vertical` | `display:flex!important; flex-direction:column!important;` | Stays the same | +| `u-flex-vertical-mobile` | `@media #{$break1} { flex-direction:column!important; }` | `@media (max-width:767.99px) { flex-direction:column!important; }` | +| `u-flex-wrap` | `flex-wrap: wrap!important;` | Stays the same | +| `u-stretch` | `flex: 1!important;` | Stays the same | +| `u-flex-basis-140` | `flex-basis: pxToRem(140)!important;` | `flex-basis: 8.75rem!important;` | +| `u-flex-basis-250` | `flex-basis: pxToRem(250)!important;` | `flex-basis: 15.625rem!important;` | +| `u-flex-basis-500` | `flex-basis: pxToRem(500)!important;` | `flex-basis: 31.25rem!important;` | +| `u-flex-basis-50-percent` | `flex-basis: 50%!important;` | Stays the same | +| `u-flex-basis-100-percent` | `flex-basis: 100%!important;` | Stays the same | +| `u-flex-shrink-0` | `flex-shrink: 0!important;` | Stays the same | +| `u-flex-basis-auto` | `flex-basis: auto!important;` | Stays the same | +| | | | +| `u-grid-columns-auto-1fr` | `grid-template-columns: auto 1fr!important;` | Stays the same | +| | | | +| `u-width-fit-content` | `inline-size:fit-content!important;` | Stays the same | +| `u-width-full-line` | `inline-size: 100%!important;` | Stays the same | +| `u-width-140` | `inline-size: pxToRem(140)!important;` | `inline-size: 8.75rem!important;` | +| `u-width-150` | `inline-size: pxToRem(150)!important;` | `inline-size: 9.375rem!important;` | +| `u-width-200` | `inline-size: pxToRem(200)!important;` | `inline-size: 12.5rem;!important` | +| `u-width-250` | `inline-size: pxToRem(250)!important;` | `inline-size: 15.625rem!important;` | +| `u-width-600` | `inline-size: pxToRem(600)!important;` | `inline-size: 37.5rem!important;` | +| `u-width-280-desktop` | `@media #{$break3open} { inline-size: pxToRem(280)!important; }` | `@media (min-width:1199px) { inline-size: 17.25rem!important; }` | +| | | | +| `u-min-width-0` | `min-inline-size: 0!important; /_use to solve flexbox un-shrink problem;_/` | Stays the same | +| `u-min-width-200` | `min-inline-size: pxToRem(200)!important; ` | `min-inline-size: 25rem!important;` | +| `u-min-width-100-percent` | `min-inline-size: 100%!important;` | Stays the same | +| | | | +| `u-max-width-250` | `max-inline-size: pxToRem(250)!important;` | `max-inline-size: 15.625rem!important;` | +| `u-max-width-300` | `max-inline-size: pxToRem(300)!important;` | `max-inline-size: 18.75rem!important;` | +| `u-max-width-350` | `max-inline-size: pxToRem(350)!important;` | `max-inline-size: 21.875rem!important;` | +| `u-max-width-400` | `max-inline-size: pxToRem(400)!important;` | `max-inline-size: 25rem!important;` | +| `u-max-width-450` | `max-inline-size: pxToRem(450)!important;` | `max-inline-size: 28.125rem!important;` | +| `u-max-width-500` | `max-inline-size: pxToRem(500)!important;` | `max-inline-size: 31.25rem!important;` | +| `u-max-width-600` | `max-inline-size: pxToRem(600)!important;` | `max-inline-size: 37.5rem!important;` | +| `u-max-width-650` | `max-inline-size: pxToRem(650)!important;` | `max-inline-size: 40.625rem!important;` | +| `u-max-width-700` | `max-inline-size: pxToRem(700)!important;` | `max-inline-size: 43.75rem!important;` | +| `u-max-width-100-percent` | `max-inline-size: 100%!important;` | Stays the same | +| | | | +| `u-height-100-percent` | `block-size: 100%!important;` | Stays the same | +| `u-height-auto` | `block-size: auto!important;` | Stays the same | +| `u-full-screen-height` | `block-size: 100vh!important; block-size: 100lvh!important;` | Stays the same | +| | | | +| `u-min-height-100` | `min-block-size: pxToRem(100)!important;` | `min-block-size: 6.25rem!important;` | +| `u-min-height-184` | `min-block-size: pxToRem(184)!important;` | `min-block-size: 11.5rem!important;` | +| `u-min-height-100-percent` | `min-block-size:100%!important;` | Stays the same | +| | | | +| `u-max-height-200` | `max-block-size: pxToRem(200)!important;` | `max-block-size: 12.5rem!important;` | ## Alignments In the Appwrite console we control alignments by using: -| Class | CSS | -| ---------------------- | --------------------------------- | -| `u-main-center` | `justify-content: center;` | -| `u-main-space-between` | `justify-content: space-between;` | -| `u-main-end` | `justify-content: end;` | -| | | -| `u-cross-start` | `align-items: start;` | -| `u-cross-baseline` | `align-items: baseline;` | -| `u-cross-center` | `align-items: center;` | -| `u-cross-end` | `align-items: end;` | -| | | -| `u-cross-child-start` | `align-self: start;` | -| `u-cross-child-center` | `align-self: center;` | -| `u-cross-child-end` | `align-self: end;` | +| Class | CSS | +| ---------------------- | ------------------------------------------- | +| `u-main-center` | `justify-content: center!important;` | +| `u-main-space-between` | `justify-content: space-between!important;` | +| `u-main-end` | `justify-content: end!important;` | +| | | +| `u-cross-start` | `align-items: start!important;` | +| `u-cross-baseline` | `align-items: baseline!important;` | +| `u-cross-center` | `align-items: center!important;` | +| `u-cross-end` | `align-items: end!important;` | +| | | +| `u-cross-child-start` | `align-self: start!important;` | +| `u-cross-child-center` | `align-self: center!important;` | +| `u-cross-child-end` | `align-self: end!important;` |
diff --git a/apps/pink/src/pages/utilities/position.mdx b/apps/pink/src/pages/utilities/position.mdx index e81f025fd1..dd188d02dd 100644 --- a/apps/pink/src/pages/utilities/position.mdx +++ b/apps/pink/src/pages/utilities/position.mdx @@ -3,55 +3,55 @@ title: Position description: An element's position can be quickly configured by using Position classes. --- -| Class | Scss Define | Translated CSS | -| ------------------------ | --------------------------------- | -------------------------------- | -| `u-position-relative` | `position: relative;` | Stays the same | -| `u-position-absolute` | `position: absolute;` | Stays the same | -| `u-position-fixed ` | `position: fixed;` | Stays the same | -| `u-position-static` | `position: static;` | Stays the same | -| | | | -| `u-inset-0` | `inset: 0;` | Stays the same | -| | | | -| `u-inset-inline-0` | `inset-inline: 0;` | Stays the same | -| | | | -| `u-inset-inline-start-0` | `inset-inline-start: 0;` | Stays the same | -| `u-inset-inline-start-1` | `inset-inline-start: pxToRem(1);` | `inset-inline-start: 0.0625rem;` | -| `u-inset-inline-start-4` | `inset-inline-start: pxToRem(4);` | `inset-inline-start: 0.25rem;` | -| `u-inset-inline-start-8` | `inset-inline-start: pxToRem(8);` | `inset-inline-start: 0.5rem;` | -| `u-inset-inline-start-12`| `inset-inline-start: pxToRem(12);`| `inset-inline-start: 0.75rem;` | -| `u-inset-inline-start-16`| `inset-inline-start: pxToRem(16);`| `inset-inline-start: 1rem;` | -| | | | -| `u-inset-inline-end-0` | `inset-inline-end: 0;` | Stays the same | -| `u-inset-inline-end-1` | `inset-inline-end: pxToRem(1);` | `inset-inline-end: 0.0625rem;` | -| `u-inset-inline-end-4` | `inset-inline-end: pxToRem(4);` | `inset-inline-end: 0.25rem;` | -| `u-inset-inline-end-8` | `inset-inline-end: pxToRem(8);` | `inset-inline-end: 0.5rem;` | -| `u-inset-inline-end-12` | `inset-inline-end: pxToRem(12);` | `inset-inline-end: 0.75rem;` | -| `u-inset-inline-end-16` | `inset-inline-end: pxToRem(16);` | `inset-inline-end: 1rem;` | -| | | | -| `u-inset-block-start-0` | `inset-block-start: 0;` | Stays the same | -| `u-inset-block-start-1` | `inset-block-start: pxToRem(1);` | `inset-block-start: 0.0625rem;` | -| `u-inset-block-start-4` | `inset-block-start: pxToRem(4);` | `inset-block-start: 0.25rem;` | -| `u-inset-block-start-8` | `inset-block-start: pxToRem(8);` | `inset-block-start: 0.5rem;` | -| `u-inset-block-start-12` | `inset-block-start: pxToRem(12);` | `inset-block-start: 0.75rem;` | -| `u-inset-block-start-16` | `inset-block-start: pxToRem(16);` | `inset-block-start: 1rem;` | -| | | | -| `u-inset-block-end-0` | `inset-block-end: 0;` | Stays the same | -| `u-inset-block-end-1` | `inset-block-end: pxToRem(1);` | `inset-block-end: 0.0625rem;` | -| `u-inset-block-end-4` | `inset-block-end: pxToRem(4);` | `inset-block-end: 0.25rem;` | -| `u-inset-block-end-8` | `inset-block-end: pxToRem(8);` | `inset-block-end: 0.5rem;` | -| `u-inset-block-end-12` | `inset-block-end: pxToRem(12);` | `inset-block-end: 0.75rem;` | -| `u-inset-block-end-16` | `inset-block-end: pxToRem(16);` | `inset-block-end: 1rem;` | +| Class | Scss Define | Translated CSS | +| ------------------------ | ------------------------------------------- | -------------------------------- | +| `u-position-relative` | `position: relative!important;` | Stays the same | +| `u-position-absolute` | `position: absolute!important;` | Stays the same | +| `u-position-fixed ` | `position: fixed!important;` | Stays the same | +| `u-position-static` | `position: static!important;` | Stays the same | +| | | | +| `u-inset-0` | `inset: 0!important;` | Stays the same | +| | | | +| `u-inset-inline-0` | `inset-inline: 0!important;` | Stays the same | +| | | | +| `u-inset-inline-start-0` | `inset-inline-start: 0!important;` | Stays the same | +| `u-inset-inline-start-1` | `inset-inline-start: pxToRem(1)!important;` | `inset-inline-start: 0.0625rem!important;` | +| `u-inset-inline-start-4` | `inset-inline-start: pxToRem(4)!important;` | `inset-inline-start: 0.25rem!important;` | +| `u-inset-inline-start-8` | `inset-inline-start: pxToRem(8)!important;` | `inset-inline-start: 0.5rem!important;` | +| `u-inset-inline-start-12`| `inset-inline-start: pxToRem(12)!important;`| `inset-inline-start: 0.75rem!important;` | +| `u-inset-inline-start-16`| `inset-inline-start: pxToRem(16)!important;`| `inset-inline-start: 1rem!important;` | +| | | | +| `u-inset-inline-end-0` | `inset-inline-end: 0!important;` | Stays the same | +| `u-inset-inline-end-1` | `inset-inline-end: pxToRem(1)!important;` | `inset-inline-end: 0.0625rem!important;` | +| `u-inset-inline-end-4` | `inset-inline-end: pxToRem(4)!important;` | `inset-inline-end: 0.25rem!important;` | +| `u-inset-inline-end-8` | `inset-inline-end: pxToRem(8)!important;` | `inset-inline-end: 0.5rem!important;` | +| `u-inset-inline-end-12` | `inset-inline-end: pxToRem(12)!important;` | `inset-inline-end: 0.75rem!important;` | +| `u-inset-inline-end-16` | `inset-inline-end: pxToRem(16)!important;` | `inset-inline-end: 1rem!important;` | +| | | | +| `u-inset-block-start-0` | `inset-block-start: 0!important;` | Stays the same | +| `u-inset-block-start-1` | `inset-block-start: pxToRem(1)!important;` | `inset-block-start: 0.0625rem!important;` | +| `u-inset-block-start-4` | `inset-block-start: pxToRem(4)!important;` | `inset-block-start: 0.25rem!important;` | +| `u-inset-block-start-8` | `inset-block-start: pxToRem(8)!important;` | `inset-block-start: 0.5rem!important;` | +| `u-inset-block-start-12` | `inset-block-start: pxToRem(12)!important;` | `inset-block-start: 0.75rem!important;` | +| `u-inset-block-start-16` | `inset-block-start: pxToRem(16)!important;` | `inset-block-start: 1rem!important;` | +| | | | +| `u-inset-block-end-0` | `inset-block-end: 0!important;` | Stays the same | +| `u-inset-block-end-1` | `inset-block-end: pxToRem(1)!important;` | `inset-block-end: 0.0625rem!important;` | +| `u-inset-block-end-4` | `inset-block-end: pxToRem(4)!important;` | `inset-block-end: 0.25rem!important;` | +| `u-inset-block-end-8` | `inset-block-end: pxToRem(8)!important;` | `inset-block-end: 0.5rem!important;` | +| `u-inset-block-end-12` | `inset-block-end: pxToRem(12)!important;` | `inset-block-end: 0.75rem!important;` | +| `u-inset-block-end-16` | `inset-block-end: pxToRem(16)!important;` | `inset-block-end: 1rem!important;` | ## Z-index Classes -| Class | styles | -| ------------------- | ----------------------------- | -| `u-z-index-0` | `z-index: 0` | -| `u-z-index-1` | `z-index: 1` | -| `u-z-index-5` | `z-index: 5` | -| `u-z-index-10` | `z-index: 10` | -| `u-z-index-15` | `z-index: 15` | -| `u-z-index-20` | `z-index: 20` | +| Class | styles | +| ------------------- | ---------------------------------------- | +| `u-z-index-0` | `z-index: 0!important;` | +| `u-z-index-1` | `z-index: 1!important;` | +| `u-z-index-5` | `z-index: 5!important;` | +| `u-z-index-10` | `z-index: 10!important;` | +| `u-z-index-15` | `z-index: 15!important;` | +| `u-z-index-20` | `z-index: 20!important;` | ## Position Sticky diff --git a/apps/pink/src/pages/utilities/responsive.mdx b/apps/pink/src/pages/utilities/responsive.mdx index 4ede5ca8b4..565583c7fb 100644 --- a/apps/pink/src/pages/utilities/responsive.mdx +++ b/apps/pink/src/pages/utilities/responsive.mdx @@ -3,13 +3,13 @@ title: Responsive description: Responsive shows or hides elements depending on the size of the screen. --- -| Class | Properties | -| ------------------ | ------------------------------------------------------ | -| `.is-only-mobile` | `@media #{$break2open} { display: none; }` | -| `.is-only-tablet` | `@media #{$break1}, #{$break3open} { display: none; }` | -| `.is-only-desktop` | `@media #{$break1}, #{$break2} { display: none; }` | -| `.is-not-mobile` | `@media #{$break1} { display: none; }` | -| `.is-not-desktop` | `@media #{$break3open} { display: none; }` | +| Class | Properties | +| ------------------ | ---------------------------------------------------------------- | +| `.is-only-mobile` | `@media #{$break2open} { display: none!important; }` | +| `.is-only-tablet` | `@media #{$break1}, #{$break3open} { display: none!important; }` | +| `.is-only-desktop` | `@media #{$break1}, #{$break2} { display: none!important; }` | +| `.is-not-mobile` | `@media #{$break1} { display: none!important; }` | +| `.is-not-desktop` | `@media #{$break3open} { display: none!important; }` |

I'm visible on mobile

diff --git a/apps/pink/src/pages/utilities/text.mdx b/apps/pink/src/pages/utilities/text.mdx index 768a6f1a31..84fffbaaa0 100644 --- a/apps/pink/src/pages/utilities/text.mdx +++ b/apps/pink/src/pages/utilities/text.mdx @@ -3,24 +3,24 @@ title: Text description: Text ensures consistent text size, weight, line height and breaks across our products. --- -| Class | Scss Define | Compiled CSS | -| -------------------- | ------------------------------------------------- | ------------------------------- | -| `u-x-small` | `font-size: pxToRem(12);` | `font-size: 0.75rem;` | -| `u-small` | `font-size: pxToRem(14);` | `font-size: 0.875rem;` | -| `u-medium` | `font-size: pxToRem(16);` | `font-size: 1rem;` | -| `u-font-size-32` | `font-size: pxToRem(32);` | `font-size: 2rem;` | -| `u-bold` | `font-weight: 600;` | Stays the same | -| `u-normal` | `font-weight: normal;` | Stays the same | -| `u-underline` | `text-decoration: underline;` | Stays the same | -| `u-text-start` | `text-align: start;` | Stays the same | -| `u-text-center` | `text-align: center;` | Stays the same | -| `u-text-end` | `text-align: end;` | Stays the same | -| `u-line-height-0-7` | `line-height: 0.7;` | Stays the same | -| `u-line-height-1` | `line-height: 1;` | Stays the same | -| `u-line-height-1-25` | `line-height: 1.25;` | Stays the same | -| `u-line-height-1-5` | `line-height: 1.5;` | Stays the same | -| `u-line-height-2` | `line-height: 2;` | Stays the same | -| | | | +| Class | Scss Define | Compiled CSS | +| -------------------- | ----------------------------------------------------------- | ------------------------------- | +| `u-x-small` | `font-size: pxToRem(12)!important;` | `font-size: 0.75rem!important;` | +| `u-small` | `font-size: pxToRem(14)!important;` | `font-size: 0.875rem!important;` | +| `u-medium` | `font-size: pxToRem(16)!important;` | `font-size: 1rem!important;` | +| `u-font-size-32` | `font-size: pxToRem(32)!important;` | `font-size: 2rem!important;` | +| `u-bold` | `font-weight: 600!important;` | Stays the same | +| `u-normal` | `font-weight: normal!important;` | Stays the same | +| `u-underline` | `text-decoration: underline!important;` | Stays the same | +| `u-text-start` | `text-align: start!important;` | Stays the same | +| `u-text-center` | `text-align: center!important;` | Stays the same | +| `u-text-end` | `text-align: end!important;` | Stays the same | +| `u-line-height-0-7` | `line-height: 0.7!important;` | Stays the same | +| `u-line-height-1` | `line-height: 1!important;` | Stays the same | +| `u-line-height-1-25` | `line-height: 1.25!important;` | Stays the same | +| `u-line-height-1-5` | `line-height: 1.5!important;` | Stays the same | +| `u-line-height-2` | `line-height: 2!important;` | Stays the same | +| | | | | `u-break-word` | `@include break-word; white-space: initial;` | Full browser fallbacks | | `u-break-all` | `@include break-all; white-space: initial;` | Full browser fallbacks | | | | | @@ -42,13 +42,13 @@ description: Text ensures consistent text size, weight, line height and breaks a | | | `overflow: hidden;` | | | | `word-break: break-all;` | | | | | -| `u-un-break-text` | `white-space: nowrap;` | Stays the same | -| `u-capitalize` | `text-transform: capitalize;` | Stays the same | -| `u-icon-small` | `font-size: var(--icon-size-small);` | Stays the same | -| | | | -| `u-font-heading` | `font-family: var(--heading-font);` | Stays the same | -| `u-font-content` | `font-family: var(--content-font);` | Stays the same | -| `u-font-code` | `font-family: var(--code-font);` | Stays the same | +| `u-un-break-text` | `white-space: nowrap!important;` | Stays the same | +| `u-capitalize` | `text-transform: capitalize!important;` | Stays the same | +| `u-icon-small` | `font-size: var(--icon-size-small)!important;` | Stays the same | +| | | | +| `u-font-heading` | `font-family: var(--heading-font)!important;` | Stays the same | +| `u-font-content` | `font-family: var(--content-font)!important;` | Stays the same | +| `u-font-code` | `font-family: var(--code-font)!important;` | Stays the same |

x-small

diff --git a/apps/pink/src/pages/utilities/theme.mdx b/apps/pink/src/pages/utilities/theme.mdx index 3e3042c474..fd9ebbcdcf 100644 --- a/apps/pink/src/pages/utilities/theme.mdx +++ b/apps/pink/src/pages/utilities/theme.mdx @@ -3,9 +3,9 @@ title: Theme description: Theme shows or hides elements depending on the selected theme (light or dark). --- -| Selector | Properties | -| ---------------------------------------- | ----------------- | -| `.u-only-light` | `display: none;` | -| `.u-only-dark` | `display: none;` | -| `#{$theme-dark} .u-only-dark` | `display: block;` | -| `body:not(#{$theme-dark}) .u-only-light` | `display: block;` | +| Selector | Properties | +| ---------------------------------------- | --------------------------- | +| `.u-only-light` | `display: none!important;` | +| `.u-only-dark` | `display: none!important;` | +| `#{$theme-dark} .u-only-dark` | `display: block!important;` | +| `body:not(#{$theme-dark}) .u-only-light` | `display: block!important;` | diff --git a/apps/pink/src/pages/utilities/visibility.mdx b/apps/pink/src/pages/utilities/visibility.mdx index 64f36e1f1f..2d074699da 100644 --- a/apps/pink/src/pages/utilities/visibility.mdx +++ b/apps/pink/src/pages/utilities/visibility.mdx @@ -3,16 +3,16 @@ title: Visibility description: An element's visibility, opacity and overflow are controlled by the classes below. --- -| Class | Properties | -| -------------------- | -------------------- | -| `u-hide` | `display: nonet;` | -| `u-opacity-0` | `opacity: 0;` | -| `u-opacity-20` | `opacity: 0.2;` | -| `u-opacity-50` | `opacity: 0.5;` | -| `u-overflow-hidden` | `overflow: hidden;` | -| `u-overflow-visible` | `overflow: visible;` | -| `u-overflow-x-auto` | `overflow-x: auto;` | -| `u-overflow-y-auto` | `overflow-y: auto;` | +| Class | Properties | +| -------------------- | ------------------------------ | +| `u-hide` | `display: none!important;` | +| `u-opacity-0` | `opacity: 0!important;` | +| `u-opacity-20` | `opacity: 0.2!important;` | +| `u-opacity-50` | `opacity: 0.5!important;` | +| `u-overflow-hidden` | `overflow: hidden!important;` | +| `u-overflow-visible` | `overflow: visible!important;` | +| `u-overflow-x-auto` | `overflow-x: auto!important;` | +| `u-overflow-y-auto` | `overflow-y: auto!important;` |
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss index 5b66b2f0f9..c71100c9f2 100644 --- a/packages/ui/src/_9-utilities.scss +++ b/packages/ui/src/_9-utilities.scss @@ -12,62 +12,62 @@ .u-overflow-y-auto { overflow-y:auto!important; } /* text */ -.u-direction-ltr { direction:ltr; } -.u-direction-rtl { direction:rtl; } +.u-direction-ltr { direction:ltr!important; } +.u-direction-rtl { direction:rtl!important; } .u-x-small { font-size:pxToRem(12)!important; } .u-small { font-size:pxToRem(14)!important; } .u-medium { font-size:pxToRem(16)!important; } .u-font-size-32 { font-size:pxToRem(32)!important; } -.u-bold { font-weight:600; } -.u-normal { font-weight:normal; } -.u-underline { text-decoration:underline; } -.u-text-start { text-align:start; } -.u-text-center { text-align:center; } -.u-text-end { text-align:end; } +.u-bold { font-weight:600!important; } +.u-normal { font-weight:normal!important; } +.u-underline { text-decoration:underline!important; } +.u-text-start { text-align:start!important; } +.u-text-center { text-align:center!important; } +.u-text-end { text-align:end!important; } .u-line-height-0-7 { line-height:0.7!important; } -.u-line-height-1 { line-height:1; } -.u-line-height-1-25 { line-height:1.25; } -.u-line-height-1-5 { line-height:1.5; } -.u-line-height-2 { line-height:2; } +.u-line-height-1 { line-height:1!important; } +.u-line-height-1-25 { line-height:1.25!important; } +.u-line-height-1-5 { line-height:1.5!important; } +.u-line-height-2 { line-height:2!important; } .u-break-word { @include break-word; white-space:initial; } .u-break-all { @include break-all; white-space:initial; } .u-trim { @include trim; } .u-trim-1 { @include trim(1); } .u-trim-2 { @include trim(2); } .u-trim-3 { @include trim(3); } -.u-trim-start { @include trim; direction:rtl; text-align:left; } +.u-trim-start { @include trim; direction:rtl!important; text-align:left!important; } .u-un-break-text { white-space:nowrap!important; } -.u-capitalize { text-transform:capitalize; } -.u-icon-small { font-size:var(--icon-size-small); } +.u-capitalize { text-transform:capitalize!important; } +.u-icon-small { font-size:var(--icon-size-small)!important; } /* Font family */ -.u-font-heading { font-family:var(--heading-font); } -.u-font-content { font-family:var(--content-font); } -.u-font-code { font-family:var(--code-font); } +.u-font-heading { font-family:var(--heading-font)!important; } +.u-font-content { font-family:var(--content-font)!important; } +.u-font-code { font-family:var(--code-font)!important; } /* Mouse Cursor */ -.u-cursor-pointer { cursor:pointer; } +.u-cursor-pointer { cursor:pointer!important; } /* color text */ -.u-color-text-disabled { color:hsl(var(--color-text-disabled)); } -.u-color-text-offline { color:hsl(var(--color-text-offline)); } -.u-color-text-info { color:hsl(var(--color-text-info)); } -.u-color-text-danger { color:hsl(var(--color-text-danger)); } -.u-color-text-warning { color:hsl(var(--color-text-warning)); } -.u-color-text-success { color:hsl(var(--color-text-success)); } +.u-color-text-disabled { color:hsl(var(--color-text-disabled))!important; } +.u-color-text-offline { color:hsl(var(--color-text-offline))!important; } +.u-color-text-info { color:hsl(var(--color-text-info))!important; } +.u-color-text-danger { color:hsl(var(--color-text-danger))!important; } +.u-color-text-warning { color:hsl(var(--color-text-warning))!important; } +.u-color-text-success { color:hsl(var(--color-text-success))!important; } -.u-color-text-gray { color:hsl(var(--color-text-gray)); } -.u-color-text-pink { color:hsl(var(--color-pink-text)); } +.u-color-text-gray { color:hsl(var(--color-text-gray))!important; } +.u-color-text-pink { color:hsl(var(--color-pink-text))!important; } /* color text light mode only */ :where(body:not(#{$theme-dark})) { - .u-color-light-only-text-neutral-70 { color:hsl(var(--color-neutral-70)); } + .u-color-light-only-text-neutral-70 { color:hsl(var(--color-neutral-70))!important; } } /* color text dark mode only */ #{$theme-dark} { - .u-color-dark-only-text-neutral-50 { color:hsl(var(--color-neutral-50)); } + .u-color-dark-only-text-neutral-50 { color:hsl(var(--color-neutral-50))!important; } } /* position */ @@ -79,226 +79,226 @@ --inset-inline-end: auto; position:sticky; - inset-block: var(--inset-block-start) var(--inset-block-end); - inset-inline: var(--inset-inline-start) var(--inset-inline-end); + inset-block: var(--inset-block-start) var(--inset-block-end)!important; + inset-inline: var(--inset-inline-start) var(--inset-inline-end)!important; } -.u-position-relative { position:relative; } -.u-position-absolute { position:absolute; } -.u-position-fixed { position:fixed; } -.u-position-static { position:static; } - -.u-inset-0 { inset:0; } - -.u-inset-inline-0 { inset-inline:0; } - -.u-inset-inline-start-0 { inset-inline-start:0; } -.u-inset-inline-start-1 { inset-inline-start:pxToRem(1); } -.u-inset-inline-start-4 { inset-inline-start:pxToRem(4); } -.u-inset-inline-start-8 { inset-inline-start:pxToRem(8); } -.u-inset-inline-start-12 { inset-inline-start:pxToRem(12); } -.u-inset-inline-start-16 { inset-inline-start:pxToRem(16); } - -.u-inset-inline-end-0 { inset-inline-end:0; } -.u-inset-inline-end-1 { inset-inline-end:pxToRem(1); } -.u-inset-inline-end-4 { inset-inline-end:pxToRem(4); } -.u-inset-inline-end-8 { inset-inline-end:pxToRem(8); } -.u-inset-inline-end-12 { inset-inline-end:pxToRem(12); } -.u-inset-inline-end-16 { inset-inline-end:pxToRem(16); } - -.u-inset-block-start-0 { inset-block-start:0; } -.u-inset-block-start-1 { inset-block-start:pxToRem(1); } -.u-inset-block-start-4 { inset-block-start:pxToRem(4); } -.u-inset-block-start-8 { inset-block-start:pxToRem(8); } -.u-inset-block-start-12 { inset-block-start:pxToRem(12); } -.u-inset-block-start-16 { inset-block-start:pxToRem(16); } - -.u-inset-block-end-0 { inset-block-end:0; } -.u-inset-block-end-1 { inset-block-end:pxToRem(1); } -.u-inset-block-end-4 { inset-block-end:pxToRem(4); } -.u-inset-block-end-8 { inset-block-end:pxToRem(8); } -.u-inset-block-end-12 { inset-block-end:pxToRem(12); } -.u-inset-block-end-16 { inset-block-end:pxToRem(16); } - -.u-z-index-0 { z-index:0; } -.u-z-index-1 { z-index:1; } -.u-z-index-5 { z-index:5; } -.u-z-index-10 { z-index:10; } -.u-z-index-15 { z-index:15; } -.u-z-index-20 { z-index:20; } +.u-position-relative { position:relative!important; } +.u-position-absolute { position:absolute!important; } +.u-position-fixed { position:fixed!important; } +.u-position-static { position:static!important; } + +.u-inset-0 { inset:0!important; } + +.u-inset-inline-0 { inset-inline:0!important; } + +.u-inset-inline-start-0 { inset-inline-start:0!important; } +.u-inset-inline-start-1 { inset-inline-start:pxToRem(1)!important; } +.u-inset-inline-start-4 { inset-inline-start:pxToRem(4)!important; } +.u-inset-inline-start-8 { inset-inline-start:pxToRem(8)!important; } +.u-inset-inline-start-12 { inset-inline-start:pxToRem(12)!important; } +.u-inset-inline-start-16 { inset-inline-start:pxToRem(16)!important; } + +.u-inset-inline-end-0 { inset-inline-end:0!important; } +.u-inset-inline-end-1 { inset-inline-end:pxToRem(1)!important; } +.u-inset-inline-end-4 { inset-inline-end:pxToRem(4)!important; } +.u-inset-inline-end-8 { inset-inline-end:pxToRem(8)!important; } +.u-inset-inline-end-12 { inset-inline-end:pxToRem(12)!important; } +.u-inset-inline-end-16 { inset-inline-end:pxToRem(16)!important; } + +.u-inset-block-start-0 { inset-block-start:0!important; } +.u-inset-block-start-1 { inset-block-start:pxToRem(1)!important; } +.u-inset-block-start-4 { inset-block-start:pxToRem(4)!important; } +.u-inset-block-start-8 { inset-block-start:pxToRem(8)!important; } +.u-inset-block-start-12 { inset-block-start:pxToRem(12)!important; } +.u-inset-block-start-16 { inset-block-start:pxToRem(16)!important; } + +.u-inset-block-end-0 { inset-block-end:0!important; } +.u-inset-block-end-1 { inset-block-end:pxToRem(1)!important; } +.u-inset-block-end-4 { inset-block-end:pxToRem(4)!important; } +.u-inset-block-end-8 { inset-block-end:pxToRem(8)!important; } +.u-inset-block-end-12 { inset-block-end:pxToRem(12)!important; } +.u-inset-block-end-16 { inset-block-end:pxToRem(16)!important; } + +.u-z-index-0 { z-index:0!important; } +.u-z-index-1 { z-index:1!important; } +.u-z-index-5 { z-index:5!important; } +.u-z-index-10 { z-index:10!important; } +.u-z-index-15 { z-index:15!important; } +.u-z-index-20 { z-index:20!important; } /* display */ -.u-block { display:block; } -.u-inline { display:inline; } -.u-grid { display:grid; } -.u-flex { display:flex; } -.u-inline-flex { display:inline-flex; } -.u-contents { display:contents; } -.u-contents-mobile{ @media #{$break1} {display:contents;} } - -.u-box-sizing-content { box-sizing:content-box; } -.u-sep-inline-start { border-inline-start:solid pxToRem(1) hsl(var(--color-border)); } -.u-sep-block-start { border-block-start:solid pxToRem(1) hsl(var(--color-border)); } -.u-sep-block-end { border-block-end:solid pxToRem(1) hsl(var(--color-border)); } - -.u-gap-2 { gap:pxToRem(2); } -.u-gap-4 { gap:pxToRem(4); } -.u-gap-8 { gap:pxToRem(8); } -.u-gap-12 { gap:pxToRem(12); } -.u-gap-16 { gap:pxToRem(16); } -.u-gap-24 { gap:pxToRem(24); } -.u-gap-32 { gap:pxToRem(32); } - -.u-column-gap-2 { column-gap:pxToRem(2); } -.u-column-gap-4 { column-gap:pxToRem(4); } -.u-column-gap-8 { column-gap:pxToRem(8); } -.u-column-gap-12 { column-gap:pxToRem(12); } -.u-column-gap-16 { column-gap:pxToRem(16); } -.u-column-gap-24 { column-gap:pxToRem(24); } - -.u-row-gap-2 { row-gap:pxToRem(2); } -.u-row-gap-4 { row-gap:pxToRem(4); } -.u-row-gap-8 { row-gap:pxToRem(8); } -.u-row-gap-12 { row-gap:pxToRem(12); } -.u-row-gap-16 { row-gap:pxToRem(16); } -.u-row-gap-24 { row-gap:pxToRem(24); } -.u-row-gap-32 { row-gap:pxToRem(32); } - -.u-flex-vertical { display:flex; flex-direction:column; } -.u-flex-vertical-mobile { @media #{$break1} { flex-direction:column; } } -.u-flex-wrap { flex-wrap:wrap; } -.u-stretch { flex:1; } -.u-flex-basis-140 { flex-basis:pxToRem(140);} -.u-flex-basis-250 { flex-basis:pxToRem(250);} -.u-flex-basis-500 { flex-basis:pxToRem(500);} -.u-flex-basis-50-percent { flex-basis:50%; } -.u-flex-basis-100-percent { flex-basis:100%; } -.u-flex-shrink-0 { flex-shrink:0; } -.u-flex-basis-auto { flex-basis:auto; } - -.u-grid-columns-auto-1fr { grid-template-columns:auto 1fr; } - -.u-width-fit-content { inline-size:fit-content; } -.u-width-full-line { inline-size:100%; } -.u-width-140 { inline-size:pxToRem(140); } -.u-width-150 { inline-size:pxToRem(150); } -.u-width-200 { inline-size:pxToRem(200); } -.u-width-250 { inline-size:pxToRem(250); } -.u-width-280-desktop { @media #{$break3open} { inline-size:pxToRem(280); } } -.u-width-600 { inline-size:pxToRem(600); } -.u-min-width-0 { min-inline-size:0; } /*use to solve flexbox un-shrink problem;*/ -.u-min-width-200 { min-inline-size:pxToRem(200); } -.u-min-width-100-percent { min-inline-size:100%; } - -.u-max-width-250 { max-inline-size:pxToRem(250); } -.u-max-width-300 { max-inline-size:pxToRem(300); } -.u-max-width-350 { max-inline-size:pxToRem(350); } -.u-max-width-400 { max-inline-size:pxToRem(400); } -.u-max-width-450 { max-inline-size:pxToRem(440); } -.u-max-width-500 { max-inline-size:pxToRem(500); } -.u-max-width-600 { max-inline-size:pxToRem(600); } -.u-max-width-650 { max-inline-size:pxToRem(650); } -.u-max-width-700 { max-inline-size:pxToRem(700); } -.u-max-width-100-percent { max-inline-size:100%; } - -.u-height-100-percent { block-size:100%; } -.u-height-auto { block-size:auto; } - -.u-min-height-100 { min-block-size:pxToRem(100); } -.u-min-height-184 { min-block-size:pxToRem(184); } -.u-min-height-100-percent { min-block-size:100%; } - -.u-max-height-200 { max-block-size:pxToRem(200); } - -.u-full-screen-height { block-size:100vh; block-size:100lvh; } +.u-block { display:block!important; } +.u-inline { display:inline!important; } +.u-grid { display:grid!important; } +.u-flex { display:flex!important; } +.u-inline-flex { display:inline-flex!important; } +.u-contents { display:contents!important; } +.u-contents-mobile{ @media #{$break1} {display:contents!important;} } + +.u-box-sizing-content { box-sizing:content-box!important; } +.u-sep-inline-start { border-inline-start:solid pxToRem(1) hsl(var(--color-border))!important; } +.u-sep-block-start { border-block-start:solid pxToRem(1) hsl(var(--color-border))!important; } +.u-sep-block-end { border-block-end:solid pxToRem(1) hsl(var(--color-border))!important; } + +.u-gap-2 { gap:pxToRem(2)!important; } +.u-gap-4 { gap:pxToRem(4)!important; } +.u-gap-8 { gap:pxToRem(8)!important; } +.u-gap-12 { gap:pxToRem(12)!important; } +.u-gap-16 { gap:pxToRem(16)!important; } +.u-gap-24 { gap:pxToRem(24)!important; } +.u-gap-32 { gap:pxToRem(32)!important; } + +.u-column-gap-2 { column-gap:pxToRem(2)!important; } +.u-column-gap-4 { column-gap:pxToRem(4)!important; } +.u-column-gap-8 { column-gap:pxToRem(8)!important; } +.u-column-gap-12 { column-gap:pxToRem(12)!important; } +.u-column-gap-16 { column-gap:pxToRem(16)!important; } +.u-column-gap-24 { column-gap:pxToRem(24)!important; } + +.u-row-gap-2 { row-gap:pxToRem(2)!important; } +.u-row-gap-4 { row-gap:pxToRem(4)!important; } +.u-row-gap-8 { row-gap:pxToRem(8)!important; } +.u-row-gap-12 { row-gap:pxToRem(12)!important; } +.u-row-gap-16 { row-gap:pxToRem(16)!important; } +.u-row-gap-24 { row-gap:pxToRem(24)!important; } +.u-row-gap-32 { row-gap:pxToRem(32)!important; } + +.u-flex-vertical { display:flex!important; flex-direction:column!important; } +.u-flex-vertical-mobile { @media #{$break1} { flex-direction:column!important; } } +.u-flex-wrap { flex-wrap:wrap!important; } +.u-stretch { flex:1!important; } +.u-flex-basis-140 { flex-basis:pxToRem(140)!important;} +.u-flex-basis-250 { flex-basis:pxToRem(250)!important;} +.u-flex-basis-500 { flex-basis:pxToRem(500)!important;} +.u-flex-basis-50-percent { flex-basis:50%!important; } +.u-flex-basis-100-percent { flex-basis:100%!important; } +.u-flex-shrink-0 { flex-shrink:0!important; } +.u-flex-basis-auto { flex-basis:auto!important; } + +.u-grid-columns-auto-1fr { grid-template-columns:auto 1fr!important; } + +.u-width-fit-content { inline-size:fit-content!important; } +.u-width-full-line { inline-size:100%!important; } +.u-width-140 { inline-size:pxToRem(140)!important; } +.u-width-150 { inline-size:pxToRem(150)!important; } +.u-width-200 { inline-size:pxToRem(200)!important; } +.u-width-250 { inline-size:pxToRem(250)!important; } +.u-width-280-desktop { @media #{$break3open} { inline-size:pxToRem(280)!important; } } +.u-width-600 { inline-size:pxToRem(600)!important; } +.u-min-width-0 { min-inline-size:0!important; } /*use to solve flexbox un-shrink problem;*/ +.u-min-width-200 { min-inline-size:pxToRem(200)!important; } +.u-min-width-100-percent { min-inline-size:100%!important; } + +.u-max-width-250 { max-inline-size:pxToRem(250)!important; } +.u-max-width-300 { max-inline-size:pxToRem(300)!important; } +.u-max-width-350 { max-inline-size:pxToRem(350)!important; } +.u-max-width-400 { max-inline-size:pxToRem(400)!important; } +.u-max-width-450 { max-inline-size:pxToRem(440)!important; } +.u-max-width-500 { max-inline-size:pxToRem(500)!important; } +.u-max-width-600 { max-inline-size:pxToRem(600)!important; } +.u-max-width-650 { max-inline-size:pxToRem(650)!important; } +.u-max-width-700 { max-inline-size:pxToRem(700)!important; } +.u-max-width-100-percent { max-inline-size:100%!important; } + +.u-height-100-percent { block-size:100%!important; } +.u-height-auto { block-size:auto!important; } + +.u-min-height-100 { min-block-size:pxToRem(100)!important; } +.u-min-height-184 { min-block-size:pxToRem(184)!important; } +.u-min-height-100-percent { min-block-size:100%!important; } + +.u-max-height-200 { max-block-size:pxToRem(200)!important; } + +.u-full-screen-height { block-size:100vh!important; block-size:100lvh!important; } /* alignments */ -.u-main-start { justify-content:start; } -.u-main-center { justify-content:center; } -.u-main-space-between { justify-content:space-between; } -.u-main-end { justify-content:end; } +.u-main-start { justify-content:start!important; } +.u-main-center { justify-content:center!important; } +.u-main-space-between { justify-content:space-between!important; } +.u-main-end { justify-content:end!important; } -.u-cross-start { align-items:start; } -.u-cross-baseline { align-items:baseline; } -.u-cross-center { align-items:center; } -.u-cross-end { align-items:end; } +.u-cross-start { align-items:start!important; } +.u-cross-baseline { align-items:baseline!important; } +.u-cross-center { align-items:center!important; } +.u-cross-end { align-items:end!important; } -.u-cross-child-start { align-self:start; } -.u-cross-child-center { align-self:center; } -.u-cross-child-end { align-self:end; } +.u-cross-child-start { align-self:start!important; } +.u-cross-child-center { align-self:center!important; } +.u-cross-child-end { align-self:end!important; } /* box model */ -.u-padding-0 { padding:0; } -.u-padding-8 { padding:pxToRem(8); } -.u-padding-12 { padding:pxToRem(12); } -.u-padding-16 { padding:pxToRem(16); } -.u-padding-24 { padding:pxToRem(24); } -.u-padding-32 { padding:pxToRem(32); } -.u-padding-64 { padding:pxToRem(64); } - -.u-padding-inline-0 { padding-inline:0; } -.u-padding-inline-8 { padding-inline:pxToRem(8); } -.u-padding-inline-12 { padding-inline:pxToRem(12); } -.u-padding-inline-16 { padding-inline:pxToRem(16); } -.u-padding-inline-24 { padding-inline:pxToRem(24); } -.u-padding-inline-32 { padding-inline:pxToRem(32); } - -.u-padding-inline-start-0 { padding-inline-start:0; } - -.u-padding-inline-end-0 { padding-inline-end:0; } -.u-padding-inline-end-12 { padding-inline-end:pxToRem(12); } -.u-padding-inline-end-56 { padding-inline-end:pxToRem(56); } -.u-padding-inline-end-120 { padding-inline-end:pxToRem(120); } - -.u-padding-block-8 { padding-block:pxToRem(8); } -.u-padding-block-12 { padding-block:pxToRem(12); } - -.u-padding-block-start-16 { padding-block-start:pxToRem(16); } -.u-padding-block-start-20 { padding-block-start:pxToRem(20); } - -.u-padding-block-end-32 { padding-block-end:pxToRem(32); } -.u-padding-block-end-56 { padding-block-end:pxToRem(56); } - - -.u-margin-auto { margin:auto; } -.u-margin-16-negative { margin:pxToRem(-16);} -.u-margin-0 { margin:0; } -.u-margin-32 { margin:pxToRem(32); } - -.u-margin-inline-auto { margin-inline:auto; } -.u-margin-inline-start-auto { margin-inline-start:auto; } -.u-margin-block-start-auto { margin-block-start:auto; } - -.u-margin-block-start-negative-56 { margin-block-start:pxToRem(-56); } -.u-margin-block-start-negative-168 { margin-block-start:pxToRem(-168); } - -.u-margin-block-start-2 { margin-block-start:pxToRem(2); } -.u-margin-block-start-4 { margin-block-start:pxToRem(4); } -.u-margin-block-start-8 { margin-block-start:pxToRem(8); } -.u-margin-block-start-12 { margin-block-start:pxToRem(12); } -.u-margin-block-start-16 { margin-block-start:pxToRem(16); } -.u-margin-block-start-20 { margin-block-start:pxToRem(20); } -.u-margin-block-start-24 { margin-block-start:pxToRem(24); } -.u-margin-block-start-32 { margin-block-start:pxToRem(32); } -.u-margin-block-start-40 { margin-block-start:pxToRem(40); } -.u-margin-block-start-48 { margin-block-start:pxToRem(48); } -.u-margin-block-start-52 { margin-block-start:pxToRem(52); } -.u-margin-block-start-100 { margin-block-start:pxToRem(100); } -.u-margin-block-start-200 { margin-block-start:pxToRem(200); } -.u-margin-block-start-300 { margin-block-start:pxToRem(300); } - -.u-margin-inline-start-4 { margin-inline-start:pxToRem(4); } -.u-margin-inline-start-8 { margin-inline-start:pxToRem(8); } -.u-margin-inline-start-12 { margin-inline-start:pxToRem(12); } -.u-margin-inline-start-16 { margin-inline-start:pxToRem(16); } -.u-margin-inline-start-24 { margin-inline-start:pxToRem(24); } -.u-margin-inline-start-32 { margin-inline-start:pxToRem(32); } - -.u-margin-inline-end-8 { margin-inline-end:pxToRem(8); } -.u-margin-inline-end-16 { margin-inline-end:pxToRem(16); } -.u-margin-inline-end-24 { margin-inline-end:pxToRem(24); } - -.u-border-width-0 { border-width:0; } -.u-mobile-border-width-0 { @media #{$break1} { border-width:0; } } +.u-padding-0 { padding:0!important; } +.u-padding-8 { padding:pxToRem(8)!important; } +.u-padding-12 { padding:pxToRem(12)!important; } +.u-padding-16 { padding:pxToRem(16)!important; } +.u-padding-24 { padding:pxToRem(24)!important; } +.u-padding-32 { padding:pxToRem(32)!important; } +.u-padding-64 { padding:pxToRem(64)!important; } + +.u-padding-inline-0 { padding-inline:0!important; } +.u-padding-inline-8 { padding-inline:pxToRem(8)!important; } +.u-padding-inline-12 { padding-inline:pxToRem(12)!important; } +.u-padding-inline-16 { padding-inline:pxToRem(16)!important; } +.u-padding-inline-24 { padding-inline:pxToRem(24)!important; } +.u-padding-inline-32 { padding-inline:pxToRem(32)!important; } + +.u-padding-inline-start-0 { padding-inline-start:0!important; } + +.u-padding-inline-end-0 { padding-inline-end:0!important; } +.u-padding-inline-end-12 { padding-inline-end:pxToRem(12)!important; } +.u-padding-inline-end-56 { padding-inline-end:pxToRem(56)!important; } +.u-padding-inline-end-120 { padding-inline-end:pxToRem(120)!important; } + +.u-padding-block-8 { padding-block:pxToRem(8)!important; } +.u-padding-block-12 { padding-block:pxToRem(12)!important; } + +.u-padding-block-start-16 { padding-block-start:pxToRem(16)!important; } +.u-padding-block-start-20 { padding-block-start:pxToRem(20)!important; } + +.u-padding-block-end-32 { padding-block-end:pxToRem(32)!important; } +.u-padding-block-end-56 { padding-block-end:pxToRem(56)!important; } + + +.u-margin-auto { margin:auto!important; } +.u-margin-0 { margin:0!important; } +.u-margin-16-negative { margin:pxToRem(-16)!important;} +.u-margin-32 { margin:pxToRem(32)!important; } + +.u-margin-inline-auto { margin-inline:auto!important; } +.u-margin-inline-start-auto { margin-inline-start:auto!important; } +.u-margin-block-start-auto { margin-block-start:auto!important; } + +.u-margin-block-start-negative-56 { margin-block-start:pxToRem(-56)!important; } +.u-margin-block-start-negative-168 { margin-block-start:pxToRem(-168)!important; } + +.u-margin-block-start-2 { margin-block-start:pxToRem(2)!important; } +.u-margin-block-start-4 { margin-block-start:pxToRem(4)!important; } +.u-margin-block-start-8 { margin-block-start:pxToRem(8)!important; } +.u-margin-block-start-12 { margin-block-start:pxToRem(12)!important; } +.u-margin-block-start-16 { margin-block-start:pxToRem(16)!important; } +.u-margin-block-start-20 { margin-block-start:pxToRem(20)!important; } +.u-margin-block-start-24 { margin-block-start:pxToRem(24)!important; } +.u-margin-block-start-32 { margin-block-start:pxToRem(32)!important; } +.u-margin-block-start-40 { margin-block-start:pxToRem(40)!important; } +.u-margin-block-start-48 { margin-block-start:pxToRem(48)!important; } +.u-margin-block-start-52 { margin-block-start:pxToRem(52)!important; } +.u-margin-block-start-100 { margin-block-start:pxToRem(100)!important; } +.u-margin-block-start-200 { margin-block-start:pxToRem(200)!important; } +.u-margin-block-start-300 { margin-block-start:pxToRem(300)!important; } + +.u-margin-inline-start-4 { margin-inline-start:pxToRem(4)!important; } +.u-margin-inline-start-8 { margin-inline-start:pxToRem(8)!important; } +.u-margin-inline-start-12 { margin-inline-start:pxToRem(12)!important; } +.u-margin-inline-start-16 { margin-inline-start:pxToRem(16)!important; } +.u-margin-inline-start-24 { margin-inline-start:pxToRem(24)!important; } +.u-margin-inline-start-32 { margin-inline-start:pxToRem(32)!important; } + +.u-margin-inline-end-8 { margin-inline-end:pxToRem(8)!important; } +.u-margin-inline-end-16 { margin-inline-end:pxToRem(16)!important; } +.u-margin-inline-end-24 { margin-inline-end:pxToRem(24)!important; } + +.u-border-width-0 { border-width:0!important; } +.u-mobile-border-width-0 { @media #{$break1} { border-width:0!important; } } //.u-border-radius-4 { border-radius:var(--border-radius-xsmall); } //.u-border-radius-8 { border-radius:var(--border-radius-small); } @@ -310,7 +310,7 @@ .u-container-inline-size { container-type: inline-size; } /* Shadows */ -.u-drop-shadow-large { filter:drop-shadow(var(--shadow-large));} +.u-drop-shadow-large { filter:drop-shadow(var(--shadow-large))!important;} /* reset inputs */ /** remove number button inputs **/ @@ -328,32 +328,32 @@ /* only light / only dark */ .u-only-light, -.u-only-dark { display:none; } +.u-only-dark { display:none!important; } #{$theme-dark} { - .u-only-dark { display:block; } + .u-only-dark { display:block!important; } } body:not(#{$theme-dark}) { - .u-only-light { display:block; } + .u-only-light { display:block!important; } } /* responsive global state classes */ .is-only-mobile { - @media #{$break2open} { display:none; } + @media #{$break2open} { display:none!important; } } .is-only-tablet { - @media #{$break1}, #{$break3open} { display:none; } + @media #{$break1}, #{$break3open} { display:none!important; } } .is-only-desktop { - @media #{$break1}, #{$break2} { display:none; } + @media #{$break1}, #{$break2} { display:none!important; } } .is-not-mobile { - @media #{$break1} { display:none; } + @media #{$break1} { display:none!important; } } .is-not-desktop { - @media #{$break3open} { display:none; } + @media #{$break3open} { display:none!important; } } \ No newline at end of file From 6bb132f2cfb86563f2f17cdc48f5c12fd4f4aec5 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 26 Jul 2023 10:32:29 -0600 Subject: [PATCH 18/30] Code Panel - New light-mode state - New collapse demo arrow at beginning - New kitchensync demo --- apps/kitchensink/cover-frame-2.html | 364 ++++++++++++++++++ apps/kitchensink/vite.config.js | 1 + apps/pink/src/pages/utilities/text.mdx | 1 + packages/ui/src/7-components/_code-panel.scss | 15 +- .../ui/src/7-components/_collapsible.scss | 8 +- packages/ui/src/_9-utilities.scss | 1 + 6 files changed, 385 insertions(+), 5 deletions(-) create mode 100644 apps/kitchensink/cover-frame-2.html diff --git a/apps/kitchensink/cover-frame-2.html b/apps/kitchensink/cover-frame-2.html new file mode 100644 index 0000000000..698fc4f85d --- /dev/null +++ b/apps/kitchensink/cover-frame-2.html @@ -0,0 +1,364 @@ + + + + + + @appwrite/kitchensink - user demo + + + +
+ {{> topNav}} +
+
+
+
+
+
+
+ Eldad Test +
Eldad Test
+
Unverified
+
+
+ eldad@appwrite.io +

Joined: June 11, 2022

+
+
+
+ + +
+
+
+
+
+
+
+
Update Name
+

Free text in here

+
+
+
+
    +
  • + +
    + +
    +
    • +
+
+
+
+
+ +
+
+
+
+
+
+
+
Update Email
+

Free text

+
+
+
+
    +
  • + +
    + +
    +
    • +
+
+
+
+
+ +
+
+
+
+
+
+
+
Update Password
+

+ Enter a new password. A password must contain + at least 8 characters. +

+
+
+
+
    +
  • + +
    + +
    +
    • +
+
+
+
+
+ +
+
+
+
+
+
+
+
User Preferences
+

+ You can update your user preferences by storing information + on the user's objects so they can easily be shared across + devices and sessions. +

+
+
+
+
    +
  • +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    +
    • +
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
Danger Zone
+

+ The user will be permanently deleted, including all data + associated with this user. This action is irreversible. +

+
+
+
+
+ Eldad Test +
+
Eldad Test
+

eldad@appwrite.io

+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +
+
+

Function ID: 0123456789012abcdefg

+ +
+
+
+
+ Chrome +
+
+

Deployment ID: 0123456789012

+ +
Size 555KB
+
+
+ + Ready + +
+
+
+
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+
+

Build [Function name]

+

Building

+
+
+ + +
+
+
+
    +
  • +
    + +
    + +
    + + + Intialization + + + 00:03s + +     +
    + +
    + 
    blahFunction = {
    + +
    + 
        firstName: "hello"
    + +
    + 
    }
    +     +
    +
    +
    • +
  • +
    + +
    + +
    + + + Intialization + + + 00:03s + +     +
    + +
    + 
    blahFunction = {
    + +
    + 
        firstName: "hello"
    + +
    + 
    }
    +     +
    +
    +
    • +
+
+
+
+
+
+ + + + diff --git a/apps/kitchensink/vite.config.js b/apps/kitchensink/vite.config.js index f0d564d1a4..d692f1ae19 100644 --- a/apps/kitchensink/vite.config.js +++ b/apps/kitchensink/vite.config.js @@ -21,6 +21,7 @@ const config = { wizard: new URL("./wizard.html", import.meta.url).pathname, wizardForm: new URL("./wizard-form.html", import.meta.url).pathname, coverFrame: new URL("./cover-frame.html", import.meta.url).pathname, + coverFrame2: new URL("./cover-frame-2.html", import.meta.url).pathname, users: new URL("./users.html", import.meta.url).pathname, user: new URL("./user.html", import.meta.url).pathname, functions: new URL("./functions.html", import.meta.url).pathname, diff --git a/apps/pink/src/pages/utilities/text.mdx b/apps/pink/src/pages/utilities/text.mdx index 84fffbaaa0..29ab6ea1b9 100644 --- a/apps/pink/src/pages/utilities/text.mdx +++ b/apps/pink/src/pages/utilities/text.mdx @@ -8,6 +8,7 @@ description: Text ensures consistent text size, weight, line height and breaks a | `u-x-small` | `font-size: pxToRem(12)!important;` | `font-size: 0.75rem!important;` | | `u-small` | `font-size: pxToRem(14)!important;` | `font-size: 0.875rem!important;` | | `u-medium` | `font-size: pxToRem(16)!important;` | `font-size: 1rem!important;` | +| `u-font-size-20` | `font-size: pxToRem(20)!important;` | `font-size: 1.25rem!important;` | | `u-font-size-32` | `font-size: pxToRem(32)!important;` | `font-size: 2rem!important;` | | `u-bold` | `font-weight: 600!important;` | Stays the same | | `u-normal` | `font-weight: normal!important;` | Stays the same | diff --git a/packages/ui/src/7-components/_code-panel.scss b/packages/ui/src/7-components/_code-panel.scss index 41958e3d12..1faa671dd9 100644 --- a/packages/ui/src/7-components/_code-panel.scss +++ b/packages/ui/src/7-components/_code-panel.scss @@ -1,15 +1,17 @@ @use "../abstract" as *; .code-panel { - --p-code-panel-header: var(--color-neutral-200); - --p-code-panel-content: var(--color-neutral-300); - --p-code-panel-text-color: var(--color-neutral-5); + --p-code-panel-header: var(--color-neutral-5); + --p-code-panel-content: var(--color-neutral-0); + --p-code-panel-text-color: var(--color-neutral-120); + --p-code-panel-border-color: var(--color-neutral-5); display: flex; flex-direction: column; block-size: 100%; flex-shrink: 0; overflow: hidden; + border: solid pxToRem(1) hsl(var(--p-code-panel-border-color)); border-radius: var(--border-radius-xsmall); color: hsl(var(--p-code-panel-text-color)); &-header { @@ -24,4 +26,11 @@ overflow: auto; background-color: hsl(var(--p-code-panel-content)); } + + #{$theme-dark} & { + --p-code-panel-header: var(--color-neutral-200); + --p-code-panel-content: var(--color-neutral-300); + --p-code-panel-text-color: var(--color-neutral-5); + --p-code-panel-border-color: var(--transparent); + } } diff --git a/packages/ui/src/7-components/_collapsible.scss b/packages/ui/src/7-components/_collapsible.scss index 810f3fb2ec..cf44d84dee 100644 --- a/packages/ui/src/7-components/_collapsible.scss +++ b/packages/ui/src/7-components/_collapsible.scss @@ -12,7 +12,8 @@ /* logic */ &-wrapper { &:where([open]) { - .icon { rotate:180deg; } + .icon-cheveron-right { rotate:90deg; } + .icon-cheveron-down { rotate:180deg; } } } @@ -20,7 +21,10 @@ padding-block:pxToRem(10); cursor:pointer; display:flex; gap:pxToRem(10); align-items:center; font-size:pxToRem(16); line-height:1.5; .text { align-self:center; font-weight:600; } - .icon { align-self:center; margin-inline-start:auto; transition:var(--transition); } + .icon { align-self:center; } + [class*="icon-"] { display:block; transition:var(--transition); } + .icon:first-child { margin-inline-end:pxToRem(8); } + .icon:last-child { margin-inline-start:auto; } &-optional { font-size:pxToRem(13); color:hsl(var(--p-toggle-optional-color)); } } diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss index c71100c9f2..6997c95208 100644 --- a/packages/ui/src/_9-utilities.scss +++ b/packages/ui/src/_9-utilities.scss @@ -17,6 +17,7 @@ .u-x-small { font-size:pxToRem(12)!important; } .u-small { font-size:pxToRem(14)!important; } .u-medium { font-size:pxToRem(16)!important; } +.u-font-size-20 { font-size:pxToRem(20)!important; } .u-font-size-32 { font-size:pxToRem(32)!important; } .u-bold { font-weight:600!important; } .u-normal { font-weight:normal!important; } From 4cefab6571c59160400bda54b4f2c9712994ac02 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 26 Jul 2023 10:34:23 -0600 Subject: [PATCH 19/30] Code Panel - change to light mode --- apps/kitchensink/cover-frame-2.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/kitchensink/cover-frame-2.html b/apps/kitchensink/cover-frame-2.html index 698fc4f85d..cc8dadc462 100644 --- a/apps/kitchensink/cover-frame-2.html +++ b/apps/kitchensink/cover-frame-2.html @@ -274,7 +274,7 @@

Deployment ID: 0123456789012

-
+
From a0e1554f1a25359c3963a531620bfb8b15a0ab1d Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 26 Jul 2023 10:37:14 -0600 Subject: [PATCH 20/30] Code Panel - remove borders --- apps/kitchensink/cover-frame-2.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/kitchensink/cover-frame-2.html b/apps/kitchensink/cover-frame-2.html index cc8dadc462..47d7452fa3 100644 --- a/apps/kitchensink/cover-frame-2.html +++ b/apps/kitchensink/cover-frame-2.html @@ -294,7 +294,7 @@

Build [Function name]

    -
  • +
  • @@ -323,7 +323,7 @@

    Build [Function name]

    • -
  • +
  • From da8cd2022790244e9bc00e340748b480906afb51 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 26 Jul 2023 10:43:04 -0600 Subject: [PATCH 21/30] Code Panel - added loading partial for demo --- apps/kitchensink/cover-frame-2.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/kitchensink/cover-frame-2.html b/apps/kitchensink/cover-frame-2.html index 47d7452fa3..671cd90487 100644 --- a/apps/kitchensink/cover-frame-2.html +++ b/apps/kitchensink/cover-frame-2.html @@ -330,7 +330,7 @@

    Build [Function name]

    - +
    Intialization From 575212f6de0aa8e47b438ee88599a29da9a2b632 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 26 Jul 2023 10:44:04 -0600 Subject: [PATCH 22/30] Code Panel - added loading partial for demo --- apps/kitchensink/cover-frame-2.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/kitchensink/cover-frame-2.html b/apps/kitchensink/cover-frame-2.html index 671cd90487..8e099b26f3 100644 --- a/apps/kitchensink/cover-frame-2.html +++ b/apps/kitchensink/cover-frame-2.html @@ -332,7 +332,7 @@

    Build [Function name]

- Intialization + Build 00:03s From 6addfc2fefca5e2270f3adf8ff07be2cdb16cd58 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 26 Jul 2023 10:47:24 -0600 Subject: [PATCH 23/30] Code Panel - update size of loader --- apps/kitchensink/cover-frame-2.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/kitchensink/cover-frame-2.html b/apps/kitchensink/cover-frame-2.html index 8e099b26f3..6383b662c6 100644 --- a/apps/kitchensink/cover-frame-2.html +++ b/apps/kitchensink/cover-frame-2.html @@ -330,7 +330,7 @@

Build [Function name]

-
+
Build From f433db9371fe4e0af6e4a1d922e5f813f2f1a76c Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 26 Jul 2023 10:48:24 -0600 Subject: [PATCH 24/30] Code Panel - update size of loader --- apps/kitchensink/cover-frame-2.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/kitchensink/cover-frame-2.html b/apps/kitchensink/cover-frame-2.html index 6383b662c6..4e53bfb48a 100644 --- a/apps/kitchensink/cover-frame-2.html +++ b/apps/kitchensink/cover-frame-2.html @@ -330,7 +330,7 @@

Build [Function name]

-
+
Build From c11ee30af7662e7b1c30d1274f34f93f4a4c6f86 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 26 Jul 2023 10:49:12 -0600 Subject: [PATCH 25/30] Code Panel - update size of loader --- apps/kitchensink/cover-frame-2.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/kitchensink/cover-frame-2.html b/apps/kitchensink/cover-frame-2.html index 4e53bfb48a..2b5c2f0c2c 100644 --- a/apps/kitchensink/cover-frame-2.html +++ b/apps/kitchensink/cover-frame-2.html @@ -330,7 +330,7 @@

Build [Function name]

-
+
Build From 08750eef7f70ab186aa8eb845f55e6ff5a682ca3 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 31 Jul 2023 11:41:13 -0500 Subject: [PATCH 26/30] Input - Update cursor input to be disabled --- packages/ui/src/6-elements/form/_text-inputs.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/src/6-elements/form/_text-inputs.scss b/packages/ui/src/6-elements/form/_text-inputs.scss index e6396e7b90..8698b1691e 100644 --- a/packages/ui/src/6-elements/form/_text-inputs.scss +++ b/packages/ui/src/6-elements/form/_text-inputs.scss @@ -148,6 +148,7 @@ textarea { --p-border-color: var(--p-border-color-disabled); --p-border-color-hover: var(--color-neutral-100); + cursor:initial; } #{$theme-dark} & { From 1d1741a896950cbac3c47a04b40973aab3b48fa1 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 31 Jul 2023 11:43:46 -0500 Subject: [PATCH 27/30] Input - Update cursor input to be disabled --- packages/ui/src/6-elements/form/_radio-and-checkbox.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/src/6-elements/form/_radio-and-checkbox.scss b/packages/ui/src/6-elements/form/_radio-and-checkbox.scss index a44bd34e55..b3148b2ab6 100644 --- a/packages/ui/src/6-elements/form/_radio-and-checkbox.scss +++ b/packages/ui/src/6-elements/form/_radio-and-checkbox.scss @@ -84,6 +84,7 @@ &:where(:disabled) { --p-bg-color: var(--p-bg-color-disabled); --p-border-color: var(--p-border-color-ddisabled); + cursor: initial; &:where(:checked) { --p-icon-color: var(--p-icon-color-disabled-checked); --p-bg-color: var(--p-bg-color-disabled-checked); From aaafcd747144c934ee75e93b24b57a68b9fcba1e Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Mon, 14 Aug 2023 14:26:11 +0100 Subject: [PATCH 28/30] enter pre-release --- .changeset/pre.json | 12 ++++++++++++ packages/icons/package.json | 2 +- packages/ui/package.json | 2 +- 3 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 .changeset/pre.json diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 0000000000..97c4a4450e --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,12 @@ +{ + "mode": "pre", + "tag": "sl10", + "initialVersions": { + "@appwrite.io/kitchensink": "0.0.0", + "@appwrite.io/pink-design": "0.0.0-rc1", + "@appwrite.io/fonts": "0.0.0", + "@appwrite.io/pink-icons": "0.0.6", + "@appwrite.io/pink": "0.0.6" + }, + "changesets": [] +} diff --git a/packages/icons/package.json b/packages/icons/package.json index 428b8c401f..fed1580531 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink-icons", - "version": "0.0.6-rc.14", + "version": "0.0.6", "description": "", "type": "module", "scripts": { diff --git a/packages/ui/package.json b/packages/ui/package.json index cc75a606d7..5e314f3901 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink", - "version": "0.0.6-rc.14", + "version": "0.0.6", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", From 50594ae07e059b6a7a7ba762338ae74c1d4cf145 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Mon, 14 Aug 2023 14:27:23 +0100 Subject: [PATCH 29/30] apply changeset --- .changeset/dirty-hounds-do.md | 6 ++++++ .changeset/pre.json | 4 +++- apps/kitchensink/package.json | 4 ++-- apps/pink/package.json | 4 ++-- packages/icons/CHANGELOG.md | 7 +++++++ packages/icons/package.json | 2 +- packages/ui/CHANGELOG.md | 8 ++++++++ packages/ui/package.json | 4 ++-- 8 files changed, 31 insertions(+), 8 deletions(-) create mode 100644 .changeset/dirty-hounds-do.md diff --git a/.changeset/dirty-hounds-do.md b/.changeset/dirty-hounds-do.md new file mode 100644 index 0000000000..9dce89ad76 --- /dev/null +++ b/.changeset/dirty-hounds-do.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": patch +"@appwrite.io/pink": patch +--- + +patch bump diff --git a/.changeset/pre.json b/.changeset/pre.json index 97c4a4450e..c680668d2f 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -8,5 +8,7 @@ "@appwrite.io/pink-icons": "0.0.6", "@appwrite.io/pink": "0.0.6" }, - "changesets": [] + "changesets": [ + "dirty-hounds-do" + ] } diff --git a/apps/kitchensink/package.json b/apps/kitchensink/package.json index a4a9d4d704..3a686aa8fb 100644 --- a/apps/kitchensink/package.json +++ b/apps/kitchensink/package.json @@ -16,8 +16,8 @@ "license": "ISC", "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "*", - "@appwrite.io/pink-icons": "*", + "@appwrite.io/pink": "0.0.7-sl10.0", + "@appwrite.io/pink-icons": "0.0.7-sl10.0", "vite-plugin-handlebars": "^1.6.0" } } diff --git a/apps/pink/package.json b/apps/pink/package.json index 11cdaa3f26..20405b96d4 100644 --- a/apps/pink/package.json +++ b/apps/pink/package.json @@ -29,8 +29,8 @@ }, "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "*", - "@appwrite.io/pink-icons": "*", + "@appwrite.io/pink": "0.0.7-sl10.0", + "@appwrite.io/pink-icons": "0.0.7-sl10.0", "@types/prismjs": "^1.26.0", "glob": "^8.0.3", "sass": "^1.57.1" diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index e69de29bb2..6dacb48f04 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -0,0 +1,7 @@ +# @appwrite.io/pink-icons + +## 0.0.7-sl10.0 + +### Patch Changes + +- patch bump diff --git a/packages/icons/package.json b/packages/icons/package.json index fed1580531..7cb8bf18af 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink-icons", - "version": "0.0.6", + "version": "0.0.7-sl10.0", "description": "", "type": "module", "scripts": { diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index c4f61c840e..47140ce674 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,13 @@ # @appwrite.io/pink +## 0.0.7-sl10.0 + +### Patch Changes + +- patch bump +- Updated dependencies + - @appwrite.io/pink-icons@0.0.7-sl10.0 + ## 0.0.6 ### Patch Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index 5e314f3901..a10ebed2eb 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink", - "version": "0.0.6", + "version": "0.0.7-sl10.0", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -12,7 +12,7 @@ "author": "", "license": "ISC", "dependencies": { - "@appwrite.io/pink-icons": "*", + "@appwrite.io/pink-icons": "0.0.7-sl10.0", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.7.3" }, From b6c029eb4ac5a0784cf70d3ef5e6abdda1f87910 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Fri, 8 Sep 2023 10:24:53 -0500 Subject: [PATCH 30/30] add option for column to span 3 columns --- package-lock.json | 4 ++-- packages/ui/src/6-elements/form/_form.scss | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index a9ffe305d5..b06fd8bcee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16248,7 +16248,7 @@ }, "packages/icons": { "name": "@appwrite.io/pink-icons", - "version": "0.0.6-rc.13", + "version": "0.0.6-rc.14", "license": "ISC", "devDependencies": { "oslllo-svg-fixer": "^2.2.0", @@ -16257,7 +16257,7 @@ }, "packages/ui": { "name": "@appwrite.io/pink", - "version": "0.0.6-rc.13", + "version": "0.0.6-rc.14", "license": "ISC", "dependencies": { "@appwrite.io/pink-icons": "*", diff --git a/packages/ui/src/6-elements/form/_form.scss b/packages/ui/src/6-elements/form/_form.scss index abd92b7560..1b7fe34227 100644 --- a/packages/ui/src/6-elements/form/_form.scss +++ b/packages/ui/src/6-elements/form/_form.scss @@ -25,6 +25,7 @@ } &-item { &.is-multiple { display:flex; align-items:center; gap:pxToRem(16); } + &.is-span-2 { grid-column:span 2;} &-part { } } } \ No newline at end of file