Skip to content

Commit

Permalink
* utilities: refactor style utilities with css variables, and rename …
Browse files Browse the repository at this point in the history 
…it to skin.
  • Loading branch information
@catouse
catouse committed Dec 14, 2023
1 parent 8533014 commit b157256
Show file tree
Hide file tree
Showing 21 changed files with 898 additions and 474 deletions.
711 changes: 425 additions & 286 deletions lib/utilities/README.md
View file

Large diffs are not rendered by default.

0 ...utilities/docs/utilities/style/outline.md → lib/utilities/docs/utilities/skin/outline.md
View file
File renamed without changes.
0 lib/utilities/docs/utilities/style/pale.md → lib/utilities/docs/utilities/skin/pale.md
View file
File renamed without changes.
0 lib/utilities/docs/utilities/style/solid.md → lib/utilities/docs/utilities/skin/solid.md
View file
File renamed without changes.
260 changes: 130 additions & 130 deletions lib/utilities/docs/utilities/spacing/space.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,156 +3,156 @@
详细配置可参考 [Tailwind 官网](https://tailwindcss.com/docs/space#add-horizontal-space-between-children)。

<Example class="h-96 -overflow-y-auto p-0">
<table class="table">
<thead>
<tr>
<th>工具类</th>
<th>属性</th>
</tr>
</thead>
<tbody>
<tr>
<td>.space-x-0</td>
<td><code>margin-left: 0px;</code></td>
</tr>
<tr>
<td>.space-y-0</td>
<td><code>margin-top: 0px;</code></td>
</tr>
<tr>
<td>.space-x-0.5</td>
<td><code>margin-left: 0.125rem; /* 2px */</code></td>
</tr>
<tr>
<td>.space-y-0.5</td>
<td><code>margin-top: 0.125rem; /* 2px */</code></td>
</tr>
<tr>
<td>.space-x-1</td>
<td><code>margin-left: 0.25rem; /* 4px */</code></td>
</tr>
<tr>
<td>.space-y-1</td>
<td><code>margin-top: 0.25rem; /* 4px */</code></td>
</tr>
<tr>
<td>.space-x-1.5</td>
<td><code>margin-left: 0.375rem; /* 6px */</code></td>
</tr>
<tr>
<td>.space-y-1.5</td>
<td><code>margin-top: 0.375rem; /* 6px */</code></td>
</tr>
<tr>
<td>.space-x-2</td>
<td><code>margin-left: 0.5rem; /* 8px */</code></td>
</tr>
<tr>
<td>.space-y-2</td>
<td><code>margin-top: 0.5rem; /* 8px */</code></td>
</tr>
<tr>
<td>.space-x-2.5</td>
<td><code>margin-left: 0.625rem; /* 10px */</code></td>
</tr>
<tr>
<td>.space-y-2.5</td>
<td><code>margin-top: 0.625rem; /* 10px */</code></td>
</tr>
<tr>
<td>.space-x-3</td>
<td><code>margin-left: 0.75rem; /* 12px */</code></td>
</tr>
<tr>
<td>.space-y-3</td>
<td><code>margin-top: 0.75rem; /* 12px */</code></td>
</tr>
<tr>
<td>.space-x-3.5</td>
<td><code>margin-left: 0.875rem; /* 14px */</code></td>
</tr>
<tr>
<td>.space-y-3.5</td>
<td><code>margin-top: 0.875rem; /* 14px */</code></td>
</tr>
<tr>
<td>.space-x-4</td>
<td><code>margin-left: 1rem; /* 16px */</code></td>
</tr>
<tr>
<td>.space-y-4</td>
<td><code>margin-top: 1rem; /* 16px */</code></td>
</tr>
<tr>
<td>.space-x-5</td>
<td><code>margin-left: 1.25rem; /* 20px */</code></td>
</tr>
<tr>
<td>.space-y-5</td>
<td><code>margin-top: 1.25rem; /* 20px */</code></td>
</tr>
<tr>
<td>.space-x-6</td>
<td><code>margin-left: 1.5rem; /* 24px */</code></td>
</tr>
<tr>
<td>.space-y-6</td>
<td><code>margin-top: 1.5rem; /* 24px */</code></td>
</tr>
<tr>
<td>.space-x-7</td>
<td><code>margin-left: 1.75rem; /* 28px */</code></td>
</tr>
<tr>
<td>.space-y-7</td>
<td><code>margin-top: 1.75rem; /* 28px */</code></td>
</tr>
<tr>
<td>.space-x-8</td>
<td><code>margin-left: 2rem; /* 32px */</code></td>
</tr>
<tr>
<td>.space-y-8</td>
<td><code>margin-top: 2rem; /* 32px */</code></td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>工具类</th>
<th>属性</th>
</tr>
</thead>
<tbody>
<tr>
<td>.space-x-0</td>
<td><code>margin-left: 0px;</code></td>
</tr>
<tr>
<td>.space-y-0</td>
<td><code>margin-top: 0px;</code></td>
</tr>
<tr>
<td>.space-x-0.5</td>
<td><code>margin-left: 0.125rem; /* 2px */</code></td>
</tr>
<tr>
<td>.space-y-0.5</td>
<td><code>margin-top: 0.125rem; /* 2px */</code></td>
</tr>
<tr>
<td>.space-x-1</td>
<td><code>margin-left: 0.25rem; /* 4px */</code></td>
</tr>
<tr>
<td>.space-y-1</td>
<td><code>margin-top: 0.25rem; /* 4px */</code></td>
</tr>
<tr>
<td>.space-x-1.5</td>
<td><code>margin-left: 0.375rem; /* 6px */</code></td>
</tr>
<tr>
<td>.space-y-1.5</td>
<td><code>margin-top: 0.375rem; /* 6px */</code></td>
</tr>
<tr>
<td>.space-x-2</td>
<td><code>margin-left: 0.5rem; /* 8px */</code></td>
</tr>
<tr>
<td>.space-y-2</td>
<td><code>margin-top: 0.5rem; /* 8px */</code></td>
</tr>
<tr>
<td>.space-x-2.5</td>
<td><code>margin-left: 0.625rem; /* 10px */</code></td>
</tr>
<tr>
<td>.space-y-2.5</td>
<td><code>margin-top: 0.625rem; /* 10px */</code></td>
</tr>
<tr>
<td>.space-x-3</td>
<td><code>margin-left: 0.75rem; /* 12px */</code></td>
</tr>
<tr>
<td>.space-y-3</td>
<td><code>margin-top: 0.75rem; /* 12px */</code></td>
</tr>
<tr>
<td>.space-x-3.5</td>
<td><code>margin-left: 0.875rem; /* 14px */</code></td>
</tr>
<tr>
<td>.space-y-3.5</td>
<td><code>margin-top: 0.875rem; /* 14px */</code></td>
</tr>
<tr>
<td>.space-x-4</td>
<td><code>margin-left: 1rem; /* 16px */</code></td>
</tr>
<tr>
<td>.space-y-4</td>
<td><code>margin-top: 1rem; /* 16px */</code></td>
</tr>
<tr>
<td>.space-x-5</td>
<td><code>margin-left: 1.25rem; /* 20px */</code></td>
</tr>
<tr>
<td>.space-y-5</td>
<td><code>margin-top: 1.25rem; /* 20px */</code></td>
</tr>
<tr>
<td>.space-x-6</td>
<td><code>margin-left: 1.5rem; /* 24px */</code></td>
</tr>
<tr>
<td>.space-y-6</td>
<td><code>margin-top: 1.5rem; /* 24px */</code></td>
</tr>
<tr>
<td>.space-x-7</td>
<td><code>margin-left: 1.75rem; /* 28px */</code></td>
</tr>
<tr>
<td>.space-y-7</td>
<td><code>margin-top: 1.75rem; /* 28px */</code></td>
</tr>
<tr>
<td>.space-x-8</td>
<td><code>margin-left: 2rem; /* 32px */</code></td>
</tr>
<tr>
<td>.space-y-8</td>
<td><code>margin-top: 2rem; /* 32px */</code></td>
</tr>
</tbody>
</table>
</Example>

### 使用方法

使用 `space-x-*` 来设置元素横向间距。

<Example>
<div class="inline-flex space-x-4 -bg-stripes-blue">
<div class="primary rounded p-4">01</div>
<div class="primary rounded p-4">02</div>
<div class="primary rounded p-4">03</div>
</div>
<div class="inline-flex space-x-4 -bg-stripes-blue">
<div class="primary rounded p-4">01</div>
<div class="primary rounded p-4">02</div>
<div class="primary rounded p-4">03</div>
</div>
</Example>

```html
<div class="inline-flex space-x-4">
<div>01</div>
<div>02</div>
<div>03</div>
<div>01</div>
<div>02</div>
<div>03</div>
</div>
```

使用 `space-y-*` 来设置元素纵向间距。

<Example>
<div class="flex -flex-col space-y-4 -bg-stripes-blue">
<div class="primary rounded p-4">01</div>
<div class="primary rounded p-4">02</div>
<div class="primary rounded p-4">03</div>
</div>
<div class="flex -flex-col space-y-4 -bg-stripes-blue">
<div class="primary rounded p-4">01</div>
<div class="primary rounded p-4">02</div>
<div class="primary rounded p-4">03</div>
</div>
</Example>

```html
<div class="flex -flex-col space-y-4">
<div>01</div>
<div>02</div>
<div>03</div>
<div>01</div>
<div>02</div>
<div>03</div>
</div>
```
4 changes: 4 additions & 0 deletions lib/utilities/src/effects/opacity.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.muted {
@apply -opacity-[--opacity-muted];
}

.opacity-0 {@apply -opacity-0;}
.opacity-5 {@apply -opacity-5;}
.opacity-10 {@apply -opacity-10;}
Expand Down
6 changes: 1 addition & 5 deletions lib/utilities/src/interactivity/disabled.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
}
3 changes: 2 additions & 1 deletion lib/utilities/src/interactivity/state.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion lib/utilities/src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
40 changes: 40 additions & 0 deletions lib/utilities/src/skin/ghost.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}
6 changes: 6 additions & 0 deletions lib/utilities/src/skin/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import './surface.css';
import './skin.css';
import './solid.css';
import './pale.css';
import './outline.css';
import './ghost.css';
Loading

0 comments on commit b157256

Please sign in to comment.