diff --git a/docsite/color-copy.css b/docsite/color-copy.css new file mode 100644 index 00000000..1ee62b50 --- /dev/null +++ b/docsite/color-copy.css @@ -0,0 +1,106 @@ +.copy-options { + font-family: var(--font-sans); + display: flex; + flex-wrap: wrap; + flex-direction: row; + gap: var(--size-3); + + & .example { + font-style: italic; + color: var(--text-2); + } + + [data-theme="light"] & .example { + color: var(--gray-7); + } + + & input:is(:disabled) { + cursor: not-allowed; + + &~label { + color: var(--gray-5); + cursor: not-allowed; + } + } + + @media (--md-n-below) { + flex-direction: column; + } +} + +.options { + display: flex; + flex-wrap: wrap; + gap: var(--size-7); + align-items: center; + justify-content: flex-start; + padding-inline: var(--size-4); + padding-block: var(--size-3); + margin: var(--size-2) 0; + overflow: auto; + border-radius: var(--radius-conditional-2); + border: var(--border-size-1) solid var(--surface-3); + background: white; + box-shadow: var(--shadow-4); + + [data-theme="dark"] & { + background: var(--surface-2); + box-shadow: var(--shadow-3); + } + + @media (max-width: 768px) { + flex-direction: column; + align-items: start; + } +} + +.options:nth-child(2) { + gap: var(--size-5); +} + +.input-group { + display: flex; + align-items: center; + /* justify-content: flex-start; */ + & > label { + padding-inline-start: var(--size-2); + } +} + +.color-format:has(:disabled) { + color: var(--gray-5); +} + +.tooltip { + position: absolute; + left: 50%; + transform: translateX(-50%); + top: -100%; + min-width: max-content; + border-radius: var(--radius-round); + padding: var(--size-1) var(--size-2); + font-size: var(--size-2); + background-color: #000; + color: #fff; + z-index: 9999; + pointer-events: none; + +} + +.tooltip-show { + animation: var(--animation-fade-in) forwards; + animation-duration: 0.5s; +} + +.tooltip-hide { + animation: var(--animation-fade-out) forwards; + animation-duration: 0.5s; +} + +.color-swatch:has(.tooltip) { + position: relative; +} + +.color-swatch-list { + list-style: none; +} \ No newline at end of file diff --git a/docsite/index.css b/docsite/index.css index cfce4b76..31b0f725 100644 --- a/docsite/index.css +++ b/docsite/index.css @@ -7,6 +7,7 @@ @import "../src/props.masks.corner-cuts.css"; @import "./syntax-highlight.css"; +@import "./color-copy.css"; :root { --max-inline-body: calc(100vw - (var(--size-8) * 2)); @@ -456,7 +457,7 @@ pre[class*="language-"] { & > h4 { counter-reset: basic -1; } - + & > h4::before { display: none; } @@ -512,40 +513,44 @@ pre[class*="language-"] { } } -.color-swatch { +.color-swatch-list { + padding-inline-start: 0; +} + +.color-swatch-list > li { + --scale: 1.5; --size: var(--size-5); - border-radius: var(--radius-round); - box-shadow: var(--inner-shadow-0); + padding-inline-start: 0; inline-size: 6.7%; block-size: var(--size); - display: grid; - place-content: center; - color: black; - text-shadow: 0 0 1px hsl(0 0% 0% / 40%); - &::before { - opacity: 0; - transition: opacity .4s var(--ease-out-3); - } - - &:nth-child(n+8)::before { + &:nth-child(n+8)>button::before { color: white; } - &:is(:hover,:focus) { - transform: scale(1.5); + &:is(:hover, :focus-visible), + &:has(button:is(:focus-visible)) + { + transform: scale(var(--scale)); transition-delay: 0s; transition-timing-function: var(--ease-elastic-out-3); - &::before { + & > button::before { opacity: 1; } } + &:is(:active) { + transform: scale(calc(var(--scale) * .88)) !important; + } + @media (--motionOK) { - transition: transform 2s var(--ease-squish-5) 3s; + transition: transform var(--ease-squish-5); + transition-duration: 2s; + transition-delay: 3s; - &:is(:hover,:focus) { + &:is(:hover, :focus-visible), + &:has(button:is(:focus-visible)) { transition-duration: .1s; } } @@ -553,9 +558,30 @@ pre[class*="language-"] { @media (--md-n-below) { --size: var(--size-3); } + @media (--xs-n-below) { --size: var(--size-2); } + +} + +.color-swatch { + padding-inline: 0; + border-radius: var(--radius-round); + box-shadow: var(--inner-shadow-0); + inline-size: 100%; + block-size: var(--size); + display: grid; + place-content: center; + color: black; + text-shadow: 0 0 1px hsl(0 0% 0% / 40%); + + &::before { + opacity: 0; + transition: opacity .4s var(--ease-out-3); + line-height: 1; + } + } .ui-gradients { @@ -1245,13 +1271,18 @@ pre[class*="language-"] { .count-em { - &::before { - content: ''; - counter-reset: basic; - position: absolute; -} + &:not(.tooltip, li)::before { + content: ''; + counter-reset: basic -1; + position: absolute; + } + + & > *:not(.tooltip, li)::before { + counter-increment: basic; + content: counter(basic); + } - & > *::before { + & button::before { counter-increment: basic; content: counter(basic); } diff --git a/docsite/index.html b/docsite/index.html index 6ae569e5..a8faaf95 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -56,13 +56,13 @@ Get Started - Try in browser + Try in browser RAD +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • + + + + + + + + + + + + + + + + + + +
    @@ -1707,7 +1746,7 @@
    Purple

    2) Creating adaptive color schemes

    It's not ideal for components to reference individual light or dark theme colors. Instead, you should prefer to use these individual variables to build a set of theme-agnostic aliases. This allows you to reference a custom property without worrying about its underlying value, which will dynamically adapt to the current context's theme.

    - +
    No Preference (Light)
    @@ -1784,7 +1823,7 @@
    Prefers Purple

    3) Using the aliases

    Your app is now free to use adaptive custom properties! Now, your team only needs to remember a single naming convention rather than wrestling with individual theming variables. Here are a few examples of how the above color theme system could be used.

    - +
    Page Styles Using Themes
    @@ -1828,7 +1867,7 @@
    Typography
    } h5,h6,small,dd { - color: var(--text-2); + color: var(--text-2); }
    @@ -2010,9 +2049,9 @@
    Vars Sample
    --ratio-square: 1; --ratio-landscape: 4/3; --ratio-portrait: 3/4; - --ratio-widescreen: 16/9; + --ratio-widescreen: 16/9; --ratio-ultrawide: 18/5; - --ratio-golden: 1.6180/1; + --ratio-golden: 1.6180/1;
    @@ -2055,7 +2094,7 @@
    The Props
    - +
    Usage Sample
    
@@ -2116,14 +2155,14 @@ 
    Font Weights
    Aa
    -
    @@ -2147,14 +2186,14 @@

    Letter Spacing

    Letter Spacing
    -
    @@ -2179,14 +2218,14 @@

    Line Height

    Sample paragraph content to provide a preview for OP's line heights
    - @@ -2209,7 +2248,7 @@

    Relative Line Height

    --font-relative-lineheight-6: calc(1rem + 3ch);     --> - +

    Font Sizes

    
@@ -2286,7 +2325,7 @@ 
    The Props
    
 
               --ease-elastic-out-{1-5}
               --ease-elastic-in-{1-5}
-              --ease-elastic-in-out-{1-5} 
+              --ease-elastic-in-out-{1-5}
 
               --ease-spring-{1-5}
               --ease-bounce-{1-5}
@@ -2572,7 +2611,7 @@ 
    Usage Sample
    
               animation: var(--animation-slide-out-down) forwards;
 
               &.open {
-                animation: var(--animation-slide-in-up) forwards;  
+                animation: var(--animation-slide-in-up) forwards;
               }
             }
 
@@ -2615,7 +2654,7 @@ 
    Bloom Fade In
    
               
             
           
-          
+
           
    
             
    Bloom Fade Out