diff --git a/lib/utilities/README.md b/lib/utilities/README.md index fa3e88abb1..1e1ba60569 100755 --- a/lib/utilities/README.md +++ b/lib/utilities/README.md @@ -1,355 +1,494 @@ -# 工具类 - - -## Solid - -```html:example: -grid -grid-cols-7 gap-4 -
primary
-
secondary
-
success
-
warning
-
danger
-
important
-
special
- -
white
-
lighter
-
light
-
gray
-
darken
-
darker
-
black
- -
canvas
-
ghost
-
surface
-
inverse
+# Utilities + +## Interactivity + +### State + +```html:example: blocks +
+ +``` + +### Loading + +```html:example: -flex -flex-row -gap-4 +
+
+
``` -## Outline - -```html:example: -grid -grid-cols-7 gap-4 -
primary-outline
-
secondary-outline
-
success-outline
-
warning-outline
-
danger-outline
-
important-outline
-
special-outline
- -
lighter-outline
-
light-outline
-
gray-outline
-
dark-outline
-
darker-outline
-
black-outline
+ +### Disabled + +```html:example: blocks +
+ ``` -## Pale - -```html:example: -grid -grid-cols-7 gap-4 -
primary-pale
-
secondary-pale
-
success-pale
-
warning-pale
-
danger-pale
-
important-pale
-
special-pale
- -
lighter-pale
-
light-pale
-
gray-pale
-
dark-pale
+## Skin + +### Surface + +```html:example: blocks +
+
+
+
+
``` -## Text - -```html:example: -grid -grid-cols-7 gap-4 -
text-primary
-
text-secondary
-
text-success
-
text-warning
-
text-danger
-
text-important
-
text-special
- -
text-white
-
text-lighter
-
text-light
-
text-gray
-
text-dark
-
text-darker
-
text-black
- -
text-canvas
-
text-surface
-
text-inverse
-
text-current
-
text-inherit
-
text-transparent
+### Solid + +#### Accent + +```html:example: blocks +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` + +#### Grays + +```html:example: blocks +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` + +### Ghost + +```html:example: blocks +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` + +### Outline + +```html:example: blocks +

Accent

+
+
+
+
+
+
+
+
+

Grays

+
+
+
+
+

Accent State

+
+
+
+
+
+
+
+
+

Grays State

+
+
+
+``` + +### Pale + +```html:example: blocks +

Accent

+
+
+
+
+
+
+
+

Grays

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

Accent State

+
+
+
+
+
+
+
+

Grays State

+
+
+
+
+
+
+
+
+
+
+``` + +## Text Colors + +```html:example: blocks +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
``` ## Background -```html:example: -grid -grid-cols-7 gap-4 -
bg-primary
-
bg-secondary
-
bg-success
-
bg-warning
-
bg-danger
-
bg-important
-
bg-special
- -
bg-white
-
bg-lighter
-
bg-light
-
bg-gray
-
bg-dark
-
bg-darker
-
bg-black
- -
bg-canvas
-
bg-surface
-
bg-inverse
-
bg-current
-
bg-inherit
-
bg-transparent
+```html:example: blocks +
bg-primary
+
bg-secondary
+
bg-success
+
bg-warning
+
bg-danger
+
bg-important
+
bg-special
+ +
bg-white
+
bg-lighter
+
bg-light
+
bg-gray
+
bg-dark
+
bg-darker
+
bg-black
+ +
bg-canvas
+
bg-surface
+
bg-inverse
+
bg-current
+
bg-inherit
+
bg-transparent
``` ## Background opacity -```html:example: -grid -grid-cols-7 gap-4 -
bg-opacity-0
-
bg-opacity-10
-
bg-opacity-20
-
bg-opacity-30
-
bg-opacity-40
-
bg-opacity-50
-
bg-opacity-60
-
bg-opacity-70
-
bg-opacity-80
-
bg-opacity-90
-
bg-opacity-95
-
bg-opacity-100
+```html:example: blocks +
bg-opacity-0
+
bg-opacity-10
+
bg-opacity-20
+
bg-opacity-30
+
bg-opacity-40
+
bg-opacity-50
+
bg-opacity-60
+
bg-opacity-70
+
bg-opacity-80
+
bg-opacity-90
+
bg-opacity-95
+
bg-opacity-100
``` ## Ring ### Ring color -```html:example: -grid -grid-cols-7 gap-4 -
ring-light
-
ring
-
ring-dark
-
ring-darker
-
ring-darkest
-
ring-primary
-
ring-secondary
-
ring-success
-
ring-warning
-
ring-danger
-
ring-important
-
ring-special
-
ring-canvas
-
ring-inverse
-
ring-inherit
-
ring-current
-
ring-black
-
ring-white
+```html:example: blocks +
ring-light
+
ring
+
ring-dark
+
ring-darker
+
ring-darkest
+
ring-primary
+
ring-secondary
+
ring-success
+
ring-warning
+
ring-danger
+
ring-important
+
ring-special
+
ring-canvas
+
ring-inverse
+
ring-inherit
+
ring-current
+
ring-black
+
ring-white
``` ### Ring width -```html:example: -grid -grid-cols-7 gap-4 -
ring-0
-
ring
-
ring-2
-
ring-3
-
ring-4
-
ring-8
+```html:example: blocks +
ring-0
+
ring
+
ring-2
+
ring-3
+
ring-4
+
ring-8
``` ### Ring inset -```html:example: -grid -grid-cols-7 gap-4 -
ring-0
-
ring
-
ring-2
-
ring-3
-
ring-4
-
ring-8
+```html:example: blocks +
ring-0
+
ring
+
ring-2
+
ring-3
+
ring-4
+
ring-8
``` ### Ring opacity -```html:example: -grid -grid-cols-7 gap-4 -
ring-opacity-0
-
ring-opacity-5
-
ring-opacity-10
-
ring-opacity-20
-
ring-opacity-30
-
ring-opacity-40
-
ring-opacity-50
-
ring-opacity-60
-
ring-opacity-70
-
ring-opacity-80
-
ring-opacity-90
-
ring-opacity-95
-
ring-opacity-100
+```html:example: blocks +
ring-opacity-0
+
ring-opacity-5
+
ring-opacity-10
+
ring-opacity-20
+
ring-opacity-30
+
ring-opacity-40
+
ring-opacity-50
+
ring-opacity-60
+
ring-opacity-70
+
ring-opacity-80
+
ring-opacity-90
+
ring-opacity-95
+
ring-opacity-100
``` ## Border ### Border Color -```html:example: -grid -grid-cols-7 gap-4 -
border-primary
-
border-secondary
-
border-success
-
border-warning
-
border-danger
-
border-important
-
border-special
- -
border-white
-
border-lighter
-
border-light
-
border-gray
-
border-dark
-
border-darker
-
border-black
- -
border-canvas
-
border-surface
-
border-inverse
- -
border-current
-
border-inherit
-
border-transparent
+```html:example: blocks +
border-primary
+
border-secondary
+
border-success
+
border-warning
+
border-danger
+
border-important
+
border-special
+ +
border-white
+
border-lighter
+
border-light
+
border-gray
+
border-dark
+
border-darker
+
border-black
+ +
border-canvas
+
border-surface
+
border-inverse
+ +
border-current
+
border-inherit
+
border-transparent
``` ### Border Size -```html:example: -grid -grid-cols-7 gap-4 -
border-0
-
border
-
border-2
-
border-4
+```html:example: blocks +
border-0
+
border
+
border-2
+
border-4
``` ### Border Radius -```html:example: -grid -grid-cols-7 gap-4 -
rounded-none
-
rounded-sm
-
rounded
-
rounded-md
-
rounded-lg
-
rounded-xl
-
rounded-full
+```html:example: blocks +
rounded-none
+
rounded-sm
+
rounded
+
rounded-md
+
rounded-lg
+
rounded-xl
+
rounded-full
``` ### Border opacity -```html:example: -grid -grid-cols-7 gap-4 -
border-opacity-0
-
border-opacity-5
-
border-opacity-10
-
border-opacity-20
-
border-opacity-30
-
border-opacity-40
-
border-opacity-50
-
border-opacity-60
-
border-opacity-70
-
border-opacity-80
-
border-opacity-90
-
border-opacity-95
-
border-opacity-100
+```html:example: blocks +
border-opacity-0
+
border-opacity-5
+
border-opacity-10
+
border-opacity-20
+
border-opacity-30
+
border-opacity-40
+
border-opacity-50
+
border-opacity-60
+
border-opacity-70
+
border-opacity-80
+
border-opacity-90
+
border-opacity-95
+
border-opacity-100
``` ## Box shadow ### Box Shadow Size -```html:example: -grid -grid-cols-7 gap-4 -
shadow-inner
-
shadow-none
-
shadow-sm
-
shadow
-
shadow-md
-
shadow-lg
-
shadow-xl
-
shadow-2xl
+```html:example: blocks +
shadow-inner
+
shadow-none
+
shadow-sm
+
shadow
+
shadow-md
+
shadow-lg
+
shadow-xl
+
shadow-2xl
``` ### Box Shadow Color -```html:example: -grid -grid-cols-7 gap-4 -
shadow-primary
-
shadow-secondary
-
shadow-success
-
shadow-warning
-
shadow-danger
-
shadow-important
-
shadow-special
- -
shadow-white
-
shadow-lighter
-
shadow-light
-
shadow-gray
-
shadow-dark
-
shadow-darker
-
shadow-black
- -
shadow-transparent
-
shadow-inherit
-
shadow-current
+```html:example: blocks +
shadow-primary
+
shadow-secondary
+
shadow-success
+
shadow-warning
+
shadow-danger
+
shadow-important
+
shadow-special
+ +
shadow-white
+
shadow-lighter
+
shadow-light
+
shadow-gray
+
shadow-dark
+
shadow-darker
+
shadow-black
+ +
shadow-transparent
+
shadow-inherit
+
shadow-current
``` ## Opacity -```html:example: -grid -grid-cols-7 gap-4 -
opacity-0
-
opacity-5
-
opacity-10
-
opacity-20
-
opacity-30
-
opacity-40
-
opacity-50
-
opacity-60
-
opacity-70
-
opacity-80
-
opacity-90
-
opacity-95
-
opacity-100
+```html:example: blocks +
opacity-0
+
opacity-5
+
opacity-10
+
opacity-20
+
opacity-30
+
opacity-40
+
opacity-50
+
opacity-60
+
opacity-70
+
opacity-80
+
opacity-90
+
opacity-95
+
opacity-100
``` ## Text opacity -```html:example: -grid -grid-cols-7 gap-4 -
text-opacity-0
-
text-opacity-10
-
text-opacity-20
-
text-opacity-30
-
text-opacity-40
-
text-opacity-50
-
text-opacity-60
-
text-opacity-70
-
text-opacity-80
-
text-opacity-90
-
text-opacity-95
-
text-opacity-100
+```html:example: blocks +
text-opacity-0
+
text-opacity-10
+
text-opacity-20
+
text-opacity-30
+
text-opacity-40
+
text-opacity-50
+
text-opacity-60
+
text-opacity-70
+
text-opacity-80
+
text-opacity-90
+
text-opacity-95
+
text-opacity-100
``` -## State - -```html:example: -grid -grid-cols-7 gap-4 - - -``` - -## Loading - -```html:example: -flex -flex-row -gap-4 -
-
-``` + diff --git a/lib/utilities/docs/utilities/style/outline.md b/lib/utilities/docs/utilities/skin/outline.md similarity index 100% rename from lib/utilities/docs/utilities/style/outline.md rename to lib/utilities/docs/utilities/skin/outline.md diff --git a/lib/utilities/docs/utilities/style/pale.md b/lib/utilities/docs/utilities/skin/pale.md similarity index 100% rename from lib/utilities/docs/utilities/style/pale.md rename to lib/utilities/docs/utilities/skin/pale.md diff --git a/lib/utilities/docs/utilities/style/solid.md b/lib/utilities/docs/utilities/skin/solid.md similarity index 100% rename from lib/utilities/docs/utilities/style/solid.md rename to lib/utilities/docs/utilities/skin/solid.md diff --git a/lib/utilities/docs/utilities/spacing/space.md b/lib/utilities/docs/utilities/spacing/space.md index a3606bffae..d40faf6c85 100644 --- a/lib/utilities/docs/utilities/spacing/space.md +++ b/lib/utilities/docs/utilities/spacing/space.md @@ -3,120 +3,120 @@ 详细配置可参考 [Tailwind 官网](https://tailwindcss.com/docs/space#add-horizontal-space-between-children)。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
工具类属性
.space-x-0margin-left: 0px;
.space-y-0margin-top: 0px;
.space-x-0.5margin-left: 0.125rem; /* 2px */
.space-y-0.5margin-top: 0.125rem; /* 2px */
.space-x-1margin-left: 0.25rem; /* 4px */
.space-y-1margin-top: 0.25rem; /* 4px */
.space-x-1.5margin-left: 0.375rem; /* 6px */
.space-y-1.5margin-top: 0.375rem; /* 6px */
.space-x-2margin-left: 0.5rem; /* 8px */
.space-y-2margin-top: 0.5rem; /* 8px */
.space-x-2.5margin-left: 0.625rem; /* 10px */
.space-y-2.5margin-top: 0.625rem; /* 10px */
.space-x-3margin-left: 0.75rem; /* 12px */
.space-y-3margin-top: 0.75rem; /* 12px */
.space-x-3.5margin-left: 0.875rem; /* 14px */
.space-y-3.5margin-top: 0.875rem; /* 14px */
.space-x-4margin-left: 1rem; /* 16px */
.space-y-4margin-top: 1rem; /* 16px */
.space-x-5margin-left: 1.25rem; /* 20px */
.space-y-5margin-top: 1.25rem; /* 20px */
.space-x-6margin-left: 1.5rem; /* 24px */
.space-y-6margin-top: 1.5rem; /* 24px */
.space-x-7margin-left: 1.75rem; /* 28px */
.space-y-7margin-top: 1.75rem; /* 28px */
.space-x-8margin-left: 2rem; /* 32px */
.space-y-8margin-top: 2rem; /* 32px */
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
工具类属性
.space-x-0margin-left: 0px;
.space-y-0margin-top: 0px;
.space-x-0.5margin-left: 0.125rem; /* 2px */
.space-y-0.5margin-top: 0.125rem; /* 2px */
.space-x-1margin-left: 0.25rem; /* 4px */
.space-y-1margin-top: 0.25rem; /* 4px */
.space-x-1.5margin-left: 0.375rem; /* 6px */
.space-y-1.5margin-top: 0.375rem; /* 6px */
.space-x-2margin-left: 0.5rem; /* 8px */
.space-y-2margin-top: 0.5rem; /* 8px */
.space-x-2.5margin-left: 0.625rem; /* 10px */
.space-y-2.5margin-top: 0.625rem; /* 10px */
.space-x-3margin-left: 0.75rem; /* 12px */
.space-y-3margin-top: 0.75rem; /* 12px */
.space-x-3.5margin-left: 0.875rem; /* 14px */
.space-y-3.5margin-top: 0.875rem; /* 14px */
.space-x-4margin-left: 1rem; /* 16px */
.space-y-4margin-top: 1rem; /* 16px */
.space-x-5margin-left: 1.25rem; /* 20px */
.space-y-5margin-top: 1.25rem; /* 20px */
.space-x-6margin-left: 1.5rem; /* 24px */
.space-y-6margin-top: 1.5rem; /* 24px */
.space-x-7margin-left: 1.75rem; /* 28px */
.space-y-7margin-top: 1.75rem; /* 28px */
.space-x-8margin-left: 2rem; /* 32px */
.space-y-8margin-top: 2rem; /* 32px */
 ### 使用方法 @@ -124,35 +124,35 @@ 使用 `space-x-*` 来设置元素横向间距。 -
-
01
-
02
-
03
-
+
+
01
+
02
+
03
+
```html
-
01
-
02
-
03
+
01
+
02
+
03
``` 使用 `space-y-*` 来设置元素纵向间距。 -
-
01
-
02
-
03
-
+
+
01
+
02
+
03
+
```html
-
01
-
02
-
03
+
01
+
02
+
03
``` diff --git a/lib/utilities/src/effects/opacity.css b/lib/utilities/src/effects/opacity.css index b317536ff9..711a578cf7 100755 --- a/lib/utilities/src/effects/opacity.css +++ b/lib/utilities/src/effects/opacity.css @@ -1,3 +1,7 @@ +.muted { + @apply -opacity-[--opacity-muted]; +} + .opacity-0 {@apply -opacity-0;} .opacity-5 {@apply -opacity-5;} .opacity-10 {@apply -opacity-10;} diff --git a/lib/utilities/src/interactivity/disabled.css b/lib/utilities/src/interactivity/disabled.css index 98a9d4c986..b6cbdfbf24 100644 --- a/lib/utilities/src/interactivity/disabled.css +++ b/lib/utilities/src/interactivity/disabled.css @@ -2,9 +2,5 @@ [disabled] *, [disabled], .disabled { - @apply !-cursor-not-allowed -grayscale -opacity-[--state-disabled-opacity]; -} - -.muted { - @apply -opacity-[--state-muted-opacity]; + @apply !-cursor-not-allowed -grayscale -opacity-[--opacity-disabled]; } diff --git a/lib/utilities/src/interactivity/state.css b/lib/utilities/src/interactivity/state.css index 4475bee85d..ee8fa01d3f 100755 --- a/lib/utilities/src/interactivity/state.css +++ b/lib/utilities/src/interactivity/state.css @@ -26,7 +26,8 @@ } .-state:active::before { background: var(--state-active-color); - @apply -ring -ring-current -duration-700; + --tw-ring-color: var(--state-ring-color, currentColor); + @apply -ring -duration-700 -opacity-80; } .-state[disabled]::before, .-state.disabled::before { diff --git a/lib/utilities/src/main.ts b/lib/utilities/src/main.ts index 1e8b9cd4bf..f98cafd168 100755 --- a/lib/utilities/src/main.ts +++ b/lib/utilities/src/main.ts @@ -3,7 +3,7 @@ import './interactivity/index.css'; import './layout/index.css'; import './spacing/index.css'; import './sizing/index.css'; -import './style/index.css'; +import './skin'; import './typography/index.css'; import './backgrounds/index.css'; import './borders/index.css'; diff --git a/lib/utilities/src/skin/ghost.css b/lib/utilities/src/skin/ghost.css new file mode 100644 index 0000000000..593924b341 --- /dev/null +++ b/lib/utilities/src/skin/ghost.css @@ -0,0 +1,40 @@ +.ghost, +.primary-ghost, +.secondary-ghost, +.success-ghost, +.warning-ghost, +.danger-ghost, +.important-ghost, +.special-ghost { + @apply -skin; + --skin-ring-opacity: 0; + --tw-bg-opacity: 0; + --skin-text: var(--skin-color, var(--color-fore-rgb)); + --skin-hover-bg: var(--skin-color); + --skin-hover-bg-opacity: .1; + --state-color: transparent; +} +.ghost { + --skin-hover-bg: var(--color-gray-500-rgb); +} +.primary-ghost { + --skin-color: var(--color-primary-500-rgb); +} +.secondary-ghost { + --skin-color: var(--color-secondary-500-rgb); +} +.success-ghost { + --skin-color: var(--color-success-500-rgb); +} +.warning-ghost { + --skin-color: var(--color-warning-500-rgb); +} +.danger-ghost { + --skin-color: var(--color-danger-500-rgb); +} +.important-ghost { + --skin-color: var(--color-important-500-rgb); +} +.special-ghost { + --skin-color: var(--color-special-500-rgb); +} diff --git a/lib/utilities/src/skin/index.ts b/lib/utilities/src/skin/index.ts new file mode 100644 index 0000000000..9cb101a5d8 --- /dev/null +++ b/lib/utilities/src/skin/index.ts @@ -0,0 +1,6 @@ +import './surface.css'; +import './skin.css'; +import './solid.css'; +import './pale.css'; +import './outline.css'; +import './ghost.css'; diff --git a/lib/utilities/src/skin/outline.css b/lib/utilities/src/skin/outline.css new file mode 100755 index 0000000000..966149dd87 --- /dev/null +++ b/lib/utilities/src/skin/outline.css @@ -0,0 +1,63 @@ +.outline, +.primary-outline, +.secondary-outline, +.success-outline, +.warning-outline, +.danger-outline, +.important-outline, +.special-outline, +.white-outline, +.bright-outline, +.lightest-outline, +.lighter-outline, +.light-gray-outline, +.gray-outline, +.dark-gray-outline, +.darker-outline, +.darkest-outline, +.inky-outline, +.black-outline { + @apply -skin; + --tw-bg-opacity: 0.01; + --tw-ring-color: currentColor; + --skin-ring-opacity: 1; + --skin-text: var(--skin-color); + --skin-bg: var(--skin-color); + --skin-hover-bg-opacity: .1; + --state-color: transparent; +} + +.outline { + --skin-hover-bg: var(--color-gray-500-rgb); +} +.primary-outline { + --skin-color: var(--color-primary-500-rgb); +} +.secondary-outline { + --skin-color: var(--color-secondary-500-rgb); +} +.success-outline { + --skin-color: var(--color-success-500-rgb); +} +.warning-outline { + --skin-color: var(--color-warning-500-rgb); +} +.danger-outline { + --skin-color: var(--color-danger-500-rgb); +} +.important-outline { + --skin-color: var(--color-important-500-rgb); +} +.special-outline { + --skin-color: var(--color-special-500-rgb); +} + +.light-gray-outline { + --skin-text: var(--color-gray-400-rgb); +} +.gray-outline { + --skin-text: var(--color-gray-500-rgb); +} +.dark-gray-outline { + --skin-text: var(--color-gray-600-rgb); +} diff --git a/lib/utilities/src/skin/pale.css b/lib/utilities/src/skin/pale.css new file mode 100755 index 0000000000..6540db9bfb --- /dev/null +++ b/lib/utilities/src/skin/pale.css @@ -0,0 +1,87 @@ +.pale, +.primary-pale, +.secondary-pale, +.success-pale, +.warning-pale, +.danger-pale, +.important-pale, +.special-pale, +.white-pale, +.bright-pale, +.lightest-pale, +.lighter-pale, +.light-gray-pale, +.gray-pale, +.dark-gray-pale, +.darker-pale, +.darkest-pale, +.inky-pale, +.black-pale { + @apply -skin; + --tw-bg-opacity: 0.1; + --skin-ring-opacity: 1; + --skin-text: var(--skin-color); + --skin-bg: var(--skin-color); + --skin-hover-bg-opacity: .1; +} + +.pale { + --skin-hover-bg: var(--color-gray-500-rgb); +} +.primary-pale { + --skin-color: var(--color-primary-500-rgb); +} +.secondary-pale { + --skin-color: var(--color-secondary-500-rgb); +} +.success-pale { + --skin-color: var(--color-success-500-rgb); +} +.warning-pale { + --skin-color: var(--color-warning-500-rgb); +} +.danger-pale { + --skin-color: var(--color-danger-500-rgb); +} +.important-pale { + --skin-color: var(--color-important-500-rgb); +} +.special-pale { + --skin-color: var(--color-special-500-rgb); +} + + +.bright-pale { + --skin-color: var(--color-gray-100-rgb); + --skin-text: var(--color-gray-400-rgb); +} +.lightest-pale { + --skin-color: var(--color-gray-200-rgb); + --skin-text: var(--color-gray-400-rgb); +} +.lighter-pale { + --skin-color: var(--color-gray-300-rgb); + --skin-text: var(--color-gray-500-rgb); +} +.light-gray-pale { + --skin-color: var(--color-gray-400-rgb); + --skin-text: var(--color-gray-500-rgb); +} +.gray-pale { + --skin-color: var(--color-gray-500-rgb); +} +.dark-gray-pale { + --skin-color: var(--color-gray-600-rgb); +} +.darker-pale { + --skin-color: var(--color-gray-700-rgb); +} +.darkest-pale { + --skin-color: var(--color-gray-800-rgb); +} +.inky-pale { + --skin-color: var(--color-gray-900-rgb); +} +.black-pale { + --skin-color: var(--color-black-rgb); +} diff --git a/lib/utilities/src/skin/skin.css b/lib/utilities/src/skin/skin.css new file mode 100644 index 0000000000..72f2e3e321 --- /dev/null +++ b/lib/utilities/src/skin/skin.css @@ -0,0 +1,26 @@ +@tailwind utilities; + +@layer utilities { + .-skin { + --skin-bg: var(--skin-color); + --tw-ring-color: rgba(var(--skin-ring), var(--skin-ring-opacity)); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + --color-link-hover-rgb: var(--skin-text); + + background-color: rgba(var(--skin-bg), var(--tw-bg-opacity)); + background-image: var(--skin-bg-img); + color: rgba(var(--skin-text), var(--tw-text-opacity)); + border: var(--skin-border-width) var(--skin-border-style) rgba(var(--skin-border, var(--skin-bg)), var(--tw-border-opacity)); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + + @apply -transition-[color,background-color,border-color,text-decoration-color,box-shadow]; + } + + .-skin:hover { + background-color: rgba(var(--skin-hover-bg, var(--skin-bg)), var(--skin-hover-bg-opacity, var(--tw-bg-opacity)))!important; + } +} + +.skin { + @apply -skin; +} diff --git a/lib/utilities/src/skin/solid.css b/lib/utilities/src/skin/solid.css new file mode 100755 index 0000000000..f8cab789a4 --- /dev/null +++ b/lib/utilities/src/skin/solid.css @@ -0,0 +1,90 @@ +.primary, +.secondary, +.success, +.warning, +.danger, +.important, +.special, +.white, +.bright, +.lightest, +.lighter, +.lighten, /* .lighten is deprecated */ +.light-gray, +.gray, +.darken, /* .darken is deprecated */ +.dark-gray, +.darker, +.darkest, +.inky, +.black { + @apply -skin; + --skin-text: var(--color-white-rgb); + --state-ring-color: rgb(var(--skin-color)); +} + +.primary { + --skin-color: var(--color-primary-500-rgb); +} +.secondary { + --skin-color: var(--color-secondary-500-rgb); +} +.success { + --skin-color: var(--color-success-500-rgb); +} +.warning { + --skin-color: var(--color-warning-500-rgb); +} +.danger { + --skin-color: var(--color-danger-500-rgb); +} +.important { + --skin-color: var(--color-important-500-rgb); +} +.special { + --skin-color: var(--color-special-500-rgb); +} + +.white { + --skin-color: var(--color-white-rgb); + --skin-text: var(--color-fore-light-rgb); + --state-ring-color: rgb(var(--skin-text)); +} +.bright { + --skin-color: var(--color-gray-100-rgb); + --skin-text: var(--color-fore-rgb); + --state-ring-color: rgb(var(--skin-text)); +} +.lightest { + --skin-color: var(--color-gray-200-rgb); + --skin-text: var(--color-fore-rgb); + --state-ring-color: rgb(var(--skin-text)); +} +.lighter { + --skin-color: var(--color-gray-300-rgb); + --skin-text: var(--color-fore-rgb); + --state-ring-color: rgb(var(--skin-text)); +} +.light-gray, +.lighten /* .lighten is deprecated */ { + --skin-color: var(--color-gray-400-rgb); +} +.gray { + --skin-color: var(--color-gray-500-rgb); +} +.dark-gray, +.darken /* .darken is deprecated */ { + --skin-color: var(--color-gray-600-rgb); +} +.darker { + --skin-color: var(--color-gray-700-rgb); +} +.darkest { + --skin-color: var(--color-gray-800-rgb); +} +.inky { + --skin-color: var(--color-gray-900-rgb); +} +.black { + --skin-color: var(--color-black-rgb); +} diff --git a/lib/utilities/src/skin/surface.css b/lib/utilities/src/skin/surface.css new file mode 100644 index 0000000000..e8f726b35b --- /dev/null +++ b/lib/utilities/src/skin/surface.css @@ -0,0 +1,21 @@ +.canvas, +.surface-light, +.surface, +.surface-strong { + @apply -text-fore; +} +.canvas { + @apply -bg-canvas; +} +.surface-light { + @apply -bg-surface-light; +} +.surface { + @apply -bg-surface; +} +.surface-strong { + @apply -bg-surface-strong; +} +.inverse { + @apply -bg-inverse -text-canvas; +} diff --git a/lib/utilities/src/style/index.css b/lib/utilities/src/style/index.css deleted file mode 100644 index 2ccb9b5b1a..0000000000 --- a/lib/utilities/src/style/index.css +++ /dev/null @@ -1,3 +0,0 @@ -@import 'outline.css'; -@import 'pale.css'; -@import 'solid.css'; diff --git a/lib/utilities/src/style/outline.css b/lib/utilities/src/style/outline.css deleted file mode 100755 index 6a3be1ddb8..0000000000 --- a/lib/utilities/src/style/outline.css +++ /dev/null @@ -1,14 +0,0 @@ -.primary-outline {@apply -ring-1 -ring-primary-500 -text-primary-500;} -.secondary-outline {@apply -ring-1 -ring-secondary-500 -text-secondary-500;} -.success-outline {@apply -ring-1 -ring-success-500 -text-success-500;} -.warning-outline {@apply -ring-1 -ring-warning-500 -text-warning-500;} -.danger-outline {@apply -ring-1 -ring-danger-500 -text-danger-500;} -.important-outline {@apply -ring-1 -ring-important-500 -text-important-500;} -.special-outline {@apply -ring-1 -ring-special-500 -text-special-500;} - -.lighter-outline {@apply -ring-1 -ring-gray-100 -text-gray-100;} -.light-outline {@apply -ring-1 -ring-gray-300 -text-gray-300;} -.gray-outline {@apply -ring-1 -ring-gray-500 -text-gray-500;} -.darken-outline {@apply -ring-1 -ring-gray-700 -text-gray-700;} -.darker-outline {@apply -ring-1 -ring-gray-900 -text-gray-900;} -.black-outline {@apply -ring-1 -ring-black -text-black;} diff --git a/lib/utilities/src/style/pale.css b/lib/utilities/src/style/pale.css deleted file mode 100755 index 864fbd472d..0000000000 --- a/lib/utilities/src/style/pale.css +++ /dev/null @@ -1,12 +0,0 @@ -.primary-pale {@apply -ring-primary-100 -bg-primary-100 -text-primary-500;} -.secondary-pale {@apply -ring-secondary-100 -bg-secondary-100 -text-secondary-500;} -.success-pale {@apply -ring-success-100 -bg-success-100 -text-success-500;} -.warning-pale {@apply -ring-warning-100 -bg-warning-100 -text-warning-500;} -.danger-pale {@apply -ring-danger-100 -bg-danger-100 -text-danger-500;} -.important-pale {@apply -ring-important-100 -bg-important-100 -text-important-500;} -.special-pale {@apply -ring-special-100 -bg-special-100 -text-special-500;} - -.lighter-pale {@apply -ring-gray-100 -bg-gray-100 -text-gray-500;} -.light-pale {@apply -ring-gray-200 -bg-gray-200 -text-gray-600;} -.gray-pale {@apply -ring-gray-300 -bg-gray-300 -text-gray-700;} -.darken-pale {@apply -ring-gray-400 -bg-gray-400 -text-gray-700;} diff --git a/lib/utilities/src/style/solid.css b/lib/utilities/src/style/solid.css deleted file mode 100755 index 0c49054c20..0000000000 --- a/lib/utilities/src/style/solid.css +++ /dev/null @@ -1,20 +0,0 @@ -.primary {@apply -ring-primary-500 -bg-primary-500 -text-white hover:-text-white;} -.secondary {@apply -ring-secondary-500 -bg-secondary-500 -text-white hover:-text-white;} -.success {@apply -ring-success-500 -bg-success-500 -text-white hover:-text-white;} -.warning {@apply -ring-warning-500 -bg-warning-500 -text-white hover:-text-white;} -.danger {@apply -ring-danger-500 -bg-danger-500 -text-white hover:-text-white;} -.important {@apply -ring-important-500 -bg-important-500 -text-white hover:-text-white;} -.special {@apply -ring-special-500 -bg-special-500 -text-white hover:-text-white;} - -.white {@apply -ring-white -bg-white;} -.lighter {@apply -ring-gray-100 -bg-gray-100;} -.light {@apply -ring-gray-300 -bg-gray-300;} -.gray {@apply -ring-gray-500 -bg-gray-500 -text-white hover:-text-white;} -.darken {@apply -ring-gray-700 -bg-gray-700 -text-white hover:-text-white;} -.darker {@apply -ring-gray-900 -bg-gray-900 -text-white hover:-text-white;} -.black {@apply -ring-black -bg-black -text-white hover:-text-white;} - -.surface {@apply -ring-surface -bg-surface -text-fore;} -.canvas {@apply -ring-canvas -bg-canvas -text-fore;} -.inverse {@apply -ring-fore -bg-fore -text-canvas;} -.ghost {@apply -ring-transparent -bg-transparent;} diff --git a/lib/utilities/src/vars.css b/lib/utilities/src/vars.css index 8a8e2c33ca..13c4340f26 100755 --- a/lib/utilities/src/vars.css +++ b/lib/utilities/src/vars.css @@ -3,6 +3,6 @@ --state-scale: .9; --state-active-color: rgba(0,0,0,.1); --state-focus-color: rgba(0,0,0,.125); - --state-disabled-opacity: .65; - --state-muted-opacity: .5; + --opacity-disabled: .65; + --opacity-muted: .5; }