js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove primary and base color aliases

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-12 16:11:02 -04:00
parent a2f63a1b63
commit 33c859a8ca
2 changed files with 52 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
docs/docs/theming/color.md
View File

@@ -405,111 +405,6 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
Foundational colors lay the groundwork for the content and structure of your project. These colors are named according to their role in your theme.
### Key Colors
Web Awesome provides aliases for two literal color groups to aid changing the key colors of your project:
- **Primary** is used to draw attention and signify actions
- **Base** makes up your project's body and structure
By default, `--wa-color-primary-{#}` references `--wa-color-blue-{#}` and `--wa-color-base-{#}` references `--wa-color-gray-{#}`.
<div class="color-name">Primary</div>
<ul class="color-group">
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-primary-95)"></div>
<small>95</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-primary-90)"></div>
<small>90</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-primary-80)"></div>
<small>80</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-primary-70)"></div>
<small>70</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-primary-60)"></div>
<small>60</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-primary-50)"></div>
<small>50</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-primary-40)"></div>
<small>40</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-primary-30)"></div>
<small>30</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-primary-20)"></div>
<small>20</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-primary-10)"></div>
<small>10</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-primary-05)"></div>
<small>05</small>
</li>
</ul>
<div class="color-name">Base</div>
<ul class="color-group">
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-base-95)"></div>
<small>95</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-base-90)"></div>
<small>90</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-base-80)"></div>
<small>80</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-base-70)"></div>
<small>70</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-base-60)"></div>
<small>60</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-base-50)"></div>
<small>50</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-base-40)"></div>
<small>40</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-base-30)"></div>
<small>30</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-base-20)"></div>
<small>20</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-base-10)"></div>
<small>10</small>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-base-05)"></div>
<small>05</small>
</li>
</ul>
### Surfaces
Surfaces are background layers that other content rests on. Surface colors help convey hierarchy through a sense of elevation, where `--wa-color-surface-raised` is the closest to the user (e.g., dialogs and popup menus) and `--wa-color-surface-lowered` is the farthest away (e.g., wells).

131
src/themes/default.css
View File

@@ -99,63 +99,35 @@
* Foundational Colors
*/
/* Primary is a key color used to draw attention and signify actions.
* Primary colors should be a 1-to-1 map with a literal color group. */
--wa-color-primary-95: var(--wa-color-blue-95);
--wa-color-primary-90: var(--wa-color-blue-90);
--wa-color-primary-80: var(--wa-color-blue-80);
--wa-color-primary-70: var(--wa-color-blue-70);
--wa-color-primary-60: var(--wa-color-blue-60);
--wa-color-primary-50: var(--wa-color-blue-50);
--wa-color-primary-40: var(--wa-color-blue-40);
--wa-color-primary-30: var(--wa-color-blue-30);
--wa-color-primary-20: var(--wa-color-blue-20);
--wa-color-primary-10: var(--wa-color-blue-10);
--wa-color-primary-05: var(--wa-color-blue-05);
/* Base is a key color that makes up your project's body and structure.
* Base colors should be a 1-to-1 map with a literal color group, usually gray. */
--wa-color-base-95: var(--wa-color-gray-95);
--wa-color-base-90: var(--wa-color-gray-90);
--wa-color-base-80: var(--wa-color-gray-80);
--wa-color-base-70: var(--wa-color-gray-70);
--wa-color-base-60: var(--wa-color-gray-60);
--wa-color-base-50: var(--wa-color-gray-50);
--wa-color-base-40: var(--wa-color-gray-40);
--wa-color-base-30: var(--wa-color-gray-30);
--wa-color-base-20: var(--wa-color-gray-20);
--wa-color-base-10: var(--wa-color-gray-10);
--wa-color-base-05: var(--wa-color-gray-05);
/* Surfaces are background layers that other content rests on.
* Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-base-95);
--wa-color-surface-border: var(--wa-color-base-90);
--wa-color-surface-lowered: var(--wa-color-gray-95);
--wa-color-surface-border: var(--wa-color-gray-90);
/* Text colors are used for standard text elements.
* Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
--wa-color-text-normal: var(--wa-color-base-10);
--wa-color-text-quiet: var(--wa-color-base-40);
--wa-color-text-link: var(--wa-color-primary-40);
--wa-color-text-normal: var(--wa-color-gray-10);
--wa-color-text-quiet: var(--wa-color-gray-40);
--wa-color-text-link: var(--wa-color-blue-40);
/* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-80) 20%, transparent);
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, transparent);
/* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
* By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
* Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-05) calc(var(--wa-shadow-blur-multiplier) * 24% + 8%),
var(--wa-color-gray-05) calc(var(--wa-shadow-blur-multiplier) * 24% + 8%),
transparent
);
/* Focus color provides the default color of the focus ring for predictable keyboard navigation.
* Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
--wa-color-focus: var(--wa-color-primary-60);
--wa-color-focus: var(--wa-color-blue-60);
/* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
--wa-color-mix-hover: black 16%;
@@ -170,14 +142,14 @@
* * On for content displayed on a fill with the corresponding attention
* Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
*/
--wa-color-brand-fill-quiet: var(--wa-color-primary-95);
--wa-color-brand-fill-normal: var(--wa-color-primary-90);
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
--wa-color-brand-border-quiet: var(--wa-color-primary-90);
--wa-color-brand-border-normal: var(--wa-color-primary-80);
--wa-color-brand-border-loud: var(--wa-color-primary-60);
--wa-color-brand-on-quiet: var(--wa-color-primary-40);
--wa-color-brand-on-normal: var(--wa-color-primary-30);
--wa-color-brand-fill-quiet: var(--wa-color-blue-95);
--wa-color-brand-fill-normal: var(--wa-color-blue-90);
--wa-color-brand-fill-loud: var(--wa-color-blue-50);
--wa-color-brand-border-quiet: var(--wa-color-blue-90);
--wa-color-brand-border-normal: var(--wa-color-blue-80);
--wa-color-brand-border-loud: var(--wa-color-blue-60);
--wa-color-brand-on-quiet: var(--wa-color-blue-40);
--wa-color-brand-on-normal: var(--wa-color-blue-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -210,14 +182,14 @@
--wa-color-danger-on-normal: var(--wa-color-red-30);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
--wa-color-neutral-fill-normal: var(--wa-color-base-90);
--wa-color-neutral-fill-loud: var(--wa-color-base-20);
--wa-color-neutral-border-quiet: var(--wa-color-base-90);
--wa-color-neutral-border-normal: var(--wa-color-base-80);
--wa-color-neutral-border-loud: var(--wa-color-base-60);
--wa-color-neutral-on-quiet: var(--wa-color-base-40);
--wa-color-neutral-on-normal: var(--wa-color-base-30);
--wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
--wa-color-neutral-fill-normal: var(--wa-color-gray-90);
--wa-color-neutral-fill-loud: var(--wa-color-gray-20);
--wa-color-neutral-border-quiet: var(--wa-color-gray-90);
--wa-color-neutral-border-normal: var(--wa-color-gray-80);
--wa-color-neutral-border-loud: var(--wa-color-gray-60);
--wa-color-neutral-on-quiet: var(--wa-color-gray-40);
--wa-color-neutral-on-normal: var(--wa-color-gray-30);
--wa-color-neutral-on-loud: white;
/**
@@ -356,6 +328,7 @@
/**
* Z-index
* TODO: use exact values and remove these properties
*/
--wa-z-index-dropdown: 900;
--wa-z-index-toast: 990;
@@ -383,7 +356,7 @@
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-placeholder-color: var(--wa-color-base-60);
--wa-form-control-placeholder-color: var(--wa-color-gray-60);
--wa-form-control-height-s: calc(
var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
@@ -423,21 +396,21 @@
/**
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-base-10);
--wa-color-surface-default: var(--wa-color-base-05);
--wa-color-surface-raised: var(--wa-color-gray-10);
--wa-color-surface-default: var(--wa-color-gray-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
--wa-color-surface-border: var(--wa-color-base-20);
--wa-color-surface-border: var(--wa-color-gray-20);
--wa-color-text-normal: var(--wa-color-base-95);
--wa-color-text-quiet: var(--wa-color-base-60);
--wa-color-text-link: var(--wa-color-primary-70);
--wa-color-text-normal: var(--wa-color-gray-95);
--wa-color-text-quiet: var(--wa-color-gray-60);
--wa-color-text-link: var(--wa-color-blue-70);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 10%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-multiplier) * 32% + 40%), transparent);
--wa-color-focus: var(--wa-color-primary-60);
--wa-color-focus: var(--wa-color-blue-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
@@ -445,14 +418,14 @@
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-primary-10);
--wa-color-brand-fill-normal: var(--wa-color-primary-20);
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
--wa-color-brand-border-quiet: var(--wa-color-primary-20);
--wa-color-brand-border-normal: var(--wa-color-primary-30);
--wa-color-brand-border-loud: var(--wa-color-primary-40);
--wa-color-brand-on-quiet: var(--wa-color-primary-60);
--wa-color-brand-on-normal: var(--wa-color-primary-70);
--wa-color-brand-fill-quiet: var(--wa-color-blue-10);
--wa-color-brand-fill-normal: var(--wa-color-blue-20);
--wa-color-brand-fill-loud: var(--wa-color-blue-50);
--wa-color-brand-border-quiet: var(--wa-color-blue-20);
--wa-color-brand-border-normal: var(--wa-color-blue-30);
--wa-color-brand-border-loud: var(--wa-color-blue-40);
--wa-color-brand-on-quiet: var(--wa-color-blue-60);
--wa-color-brand-on-normal: var(--wa-color-blue-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-10);
@@ -485,13 +458,13 @@
--wa-color-danger-on-normal: var(--wa-color-red-70);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-base-10);
--wa-color-neutral-fill-normal: var(--wa-color-base-20);
--wa-color-neutral-fill-loud: var(--wa-color-base-90);
--wa-color-neutral-border-quiet: var(--wa-color-base-20);
--wa-color-neutral-border-normal: var(--wa-color-base-30);
--wa-color-neutral-border-loud: var(--wa-color-base-40);
--wa-color-neutral-on-quiet: var(--wa-color-base-60);
--wa-color-neutral-on-normal: var(--wa-color-base-70);
--wa-color-neutral-on-loud: var(--wa-color-base-05);
--wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
--wa-color-neutral-fill-normal: var(--wa-color-gray-20);
--wa-color-neutral-fill-loud: var(--wa-color-gray-90);
--wa-color-neutral-border-quiet: var(--wa-color-gray-20);
--wa-color-neutral-border-normal: var(--wa-color-gray-30);
--wa-color-neutral-border-loud: var(--wa-color-gray-40);
--wa-color-neutral-on-quiet: var(--wa-color-gray-60);
--wa-color-neutral-on-normal: var(--wa-color-gray-70);
--wa-color-neutral-on-loud: var(--wa-color-gray-05);
}