Skip to content

Commit

Permalink
feat(styles): new color system (#367)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kiaking
kiaking committed Nov 3, 2023
1 parent 6dee6b5 commit 237af1f
Show file tree
Hide file tree
Showing 26 changed files with 1,223 additions and 1,043 deletions.
6 changes: 3 additions & 3 deletions docs/.vitepress/theme/components/Showcase.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const computedStory = computed(() => {
<style scoped>
.Showcase {
margin: 0 -12px;
border: 1px solid var(--c-divider-2);
border: 1px solid var(--c-divider);
border-radius: 6px;
}
Expand All @@ -47,10 +47,10 @@ const computedStory = computed(() => {
.header {
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--c-divider-2);
border-bottom: 1px solid var(--c-divider);
border-radius: 6px 6px 0 0;
padding: 12px 12px 12px 16px;
background-color: var(--c-bg-elv-3);
background-color: var(--c-bg-elv-4);
}
.path {
Expand Down
55 changes: 55 additions & 0 deletions docs/.vitepress/theme/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,58 @@
:root {
--vp-c-bg: var(--c-bg-elv-1);
--vp-c-bg-alt: var(--c-bg-elv-2);
--vp-c-bg-elv: var(--c-bg-elv-1);
--vp-c-bg-soft: var(--c-bg-elv-2);

--vp-c-border: var(--c-border-mute-1);
--vp-c-divider: var(--c-divider);
--vp-c-gutter: var(--c-gutter);

--vp-c-text-1: var(--c-text-1);
--vp-c-text-2: var(--c-text-2);
--vp-c-text-3: var(--c-text-3);

--vp-c-default-1: var(--c-bg-mute-1);
--vp-c-default-2: var(--c-bg-mute-2);
--vp-c-default-3: var(--c-bg-mute-3);
--vp-c-default-soft: var(--c-bg-elv-4);

--vp-c-brand-1: var(--c-text-info-1);
--vp-c-brand-2: var(--c-text-info-2);
--vp-c-brand-3: var(--c-bg-info-1);
--vp-c-brand-soft: var(--c-bg-info-dimm-a1);

--vp-c-tip-1: var(--vp-c-brand-1);
--vp-c-tip-2: var(--vp-c-brand-2);
--vp-c-tip-3: var(--vp-c-brand-3);
--vp-c-tip-soft: var(--vp-c-brand-soft);

--vp-c-warning-1: var(--c-text-warning-1);
--vp-c-warning-2: var(--c-text-warning-2);
--vp-c-warning-3: var(--c-bg-warning-1);
--vp-c-warning-soft: var(--c-bg-warning-dimm-a1);

--vp-c-danger-1: var(--c-text-danger-1);
--vp-c-danger-2: var(--c-text-danger-2);
--vp-c-danger-3: var(--c-bg-danger-1);
--vp-c-danger-soft: var(--c-bg-danger-dimm-a1);
}

.dark {
--vp-c-bg: var(--c-bg-elv-2);
--vp-c-bg-alt: var(--c-bg-elv-1);
--vp-c-bg-elv: var(--c-bg-elv-3);
--vp-c-bg-soft: var(--c-bg-elv-4);

--vp-c-border: var(--c-border-mute-1);
--vp-c-divider: var(--c-divider);
--vp-c-gutter: var(--c-gutter);

--vp-c-text-1: var(--c-text-1);
--vp-c-text-2: var(--c-text-2);
--vp-c-text-3: var(--c-text-3);
}

textarea {
font-family: inherit;
}
Expand Down
342 changes: 171 additions & 171 deletions docs/components/button.md
View file

Large diffs are not rendered by default.

286 changes: 73 additions & 213 deletions docs/styles/colors.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,224 +23,84 @@ Sefirot comes with 4 accent colors which is:
- `warning` - Yellow color used for warning, attention needed info, etc.
- `danger` - Red color used for error, deletion, dangerous info, etc.

These colors also comes with 2 basic types `text`, `border`, and `bg`. The colors should change slightly on how it is being use. For example, when using `info` (blue) color on text, it should be a bit brighter than when it is being used as background color (for example, background color of a button).
These colors also comes with 2 basic types `text`, `border`, `fg`, and `bg`. The colors should change slightly on how it is being use. For example, when using `info` (blue) color on text, it should be a bit brighter than when it is being used as background color (for example, background color of a button).

It's recommended to use one of `text`, `border`, or `bg` version of the color unless you're defining these colors for other purpose such as border colors or custom graphics.
It's recommended to use one of `text`, `border`, `fg`, and `bg`. version of the color unless you're defining these colors for other purpose such as border colors or custom graphics.

Here are the list of accent colors you may use. Accent colors are slightly different on light/dark theme.

```css
/* Light Theme */
:root {
--c-info: #0969da;
--c-info-light: #218bff;
--c-info-lighter: #54aeff;
--c-info-lghtest: #80ccff;
--c-info-dark: #0550ae;
--c-info-darker: #033d8b;
--c-info-darkest: #0a3069;
--c-info-dimm-1: rgba(2, 132, 199, 0.12);
--c-info-dimm-2: rgba(2, 132, 199, 0.2);
--c-info-dimm-3: rgba(2, 132, 199, 0.28);
--c-info-text: var(--c-info-light);
--c-info-text-light: var(--c-info-lighter);
--c-info-text-lighter: var(--c-info-lightest);
--c-info-text-dark: var(--c-info);
--c-info-text-darker: var(--c-info-dark);
--c-info-border: var(--c-info-light);
--c-info-border-light: var(--c-info-lighter);
--c-info-border-lighter: var(--c-info-lightest);
--c-info-border-dark: var(--c-info);
--c-info-border-darker: var(--c-info-dark);
--c-info-bg: var(--c-info);
--c-info-bg-light: var(--c-info-light);
--c-info-bg-lighter: var(--c-info-lighter);
--c-info-bg-dark: var(--c-info-dark);
--c-info-bg-darker: var(--c-info-darker);

--c-success: #1a7f58;
--c-success-light: #2da476;
--c-success-lighter: #4ac294;
--c-success-lghtest: #6fddaf;
--c-success-dark: #116345;
--c-success-darker: #044f37;
--c-success-darkest: #003d2b;
--c-success-dimm-1: rgba(5, 150, 105, 0.12);
--c-success-dimm-2: rgba(5, 150, 105, 0.2);
--c-success-dimm-3: rgba(5, 150, 105, 0.28);
--c-success-text: var(--c-success-light);
--c-success-text-light: var(--c-success-lighter);
--c-success-text-lighter: var(--c-success-lightest);
--c-success-text-dark: var(--c-success);
--c-success-text-darker: var(--c-success-dark);
--c-success-border: var(--c-success-light);
--c-success-border-light: var(--c-success-lighter);
--c-success-border-lighter: var(--c-success-lightest);
--c-success-border-dark: var(--c-success);
--c-success-border-darker: var(--c-success-dark);
--c-success-bg: var(--c-success);
--c-success-bg-light: var(--c-success-light);
--c-success-bg-lighter: var(--c-success-lighter);
--c-success-bg-dark: var(--c-success-dark);
--c-success-bg-darker: var(--c-success-darker);

--c-warning: #bf8700;
--c-warning-light: #d4a72c;
--c-warning-lighter: #eac54f;
--c-warning-lghtest: #fae17d;
--c-warning-dark: #9a6700;
--c-warning-darker: #7d4e00;
--c-warning-darkest: #633c01;
--c-warning-dimm-1: rgba(202, 138, 4, 0.12);
--c-warning-dimm-2: rgba(202, 138, 4, 0.2);
--c-warning-dimm-3: rgba(202, 138, 4, 0.28);
--c-warning-text: var(--c-warning-light);
--c-warning-text-light: var(--c-warning-lighter);
--c-warning-text-lighter: var(--c-warning-lightest);
--c-warning-text-dark: var(--c-warning);
--c-warning-text-darker: var(--c-warning-dark);
--c-warning-border: var(--c-warning-light);
--c-warning-border-light: var(--c-warning-lighter);
--c-warning-border-lighter: var(--c-warning-lightest);
--c-warning-border-dark: var(--c-warning);
--c-warning-border-darker: var(--c-warning-dark);
--c-warning-bg: var(--c-warning);
--c-warning-bg-light: var(--c-warning-light);
--c-warning-bg-lighter: var(--c-warning-lighter);
--c-warning-bg-dark: var(--c-warning-dark);
--c-warning-bg-darker: var(--c-warning-darker);

--c-danger: #cf222e;
--c-danger-light: #fa4549;
--c-danger-lighter: #ff8182;
--c-danger-lghtest: #ffaba8;
--c-danger-dark: #a40e26;
--c-danger-darker: #82071e;
--c-danger-darkest: #660018;
--c-danger-dimm-1: rgba(225, 29, 72, 0.12);
--c-danger-dimm-2: rgba(225, 29, 72, 0.2);
--c-danger-dimm-3: rgba(225, 29, 72, 0.28);
--c-danger-text: var(--c-danger-light);
--c-danger-text-light: var(--c-danger-lighter);
--c-danger-text-lighter: var(--c-danger-lightest);
--c-danger-text-dark: var(--c-danger);
--c-danger-text-darker: var(--c-danger-dark);
--c-danger-border: var(--c-danger-light);
--c-danger-border-light: var(--c-danger-lighter);
--c-danger-border-lighter: var(--c-danger-lightest);
--c-danger-border-dark: var(--c-danger);
--c-danger-border-darker: var(--c-danger-dark);
--c-danger-bg: var(--c-danger);
--c-danger-bg-light: var(--c-danger-light);
--c-danger-bg-lighter: var(--c-danger-lighter);
--c-danger-bg-dark: var(--c-danger-dark);
--c-danger-bg-darker: var(--c-danger-darker);
}

/* Dark Theme */
.dark {
--c-info: #1f6feb;
--c-info-light: #388bfd;
--c-info-lighter: #58a6ff;
--c-info-lghtest: #79c0ff;
--c-info-dark: #1158c7;
--c-info-darker: #0d419d;
--c-info-darkest: #0c2d6b;
--c-info-dimm-1: rgba(2, 132, 199, 0.12);
--c-info-dimm-2: rgba(2, 132, 199, 0.2);
--c-info-dimm-3: rgba(2, 132, 199, 0.28);
--c-info-text: var(--c-info-light);
--c-info-text-light: var(--c-info-lighter);
--c-info-text-lighter: var(--c-info-lightest);
--c-info-text-dark: var(--c-info);
--c-info-text-darker: var(--c-info-dark);
--c-info-border: var(--c-info-light);
--c-info-border-light: var(--c-info-lighter);
--c-info-border-lighter: var(--c-info-lightest);
--c-info-border-dark: var(--c-info);
--c-info-border-darker: var(--c-info-dark);
--c-info-bg: var(--c-info);
--c-info-bg-light: var(--c-info-light);
--c-info-bg-lighter: var(--c-info-lighter);
--c-info-bg-dark: var(--c-info-dark);
--c-info-bg-darker: var(--c-info-darker);

--c-success: #238554;
--c-success-light: #2ea069;
--c-success-lighter: #3fb978;
--c-success-lghtest: #56d38e;
--c-success-dark: #196c49;
--c-success-darker: #0f533a;
--c-success-darkest: #033a29;
--c-success-dimm-1: rgba(5, 150, 105, 0.12);
--c-success-dimm-2: rgba(5, 150, 105, 0.2);
--c-success-dimm-3: rgba(5, 150, 105, 0.28);
--c-success-text: var(--c-success-light);
--c-success-text-light: var(--c-success-lighter);
--c-success-text-lighter: var(--c-success-lightest);
--c-success-text-dark: var(--c-success);
--c-success-text-darker: var(--c-success-dark);
--c-success-border: var(--c-success-light);
--c-success-border-light: var(--c-success-lighter);
--c-success-border-lighter: var(--c-success-lightest);
--c-success-border-dark: var(--c-success);
--c-success-border-darker: var(--c-success-dark);
--c-success-bg: var(--c-success);
--c-success-bg-light: var(--c-success-light);
--c-success-bg-lighter: var(--c-success-lighter);
--c-success-bg-dark: var(--c-success-dark);
--c-success-bg-darker: var(--c-success-darker);

--c-warning: #bb8009;
--c-warning-light: #d29922;
--c-warning-lighter: #e3b341;
--c-warning-lghtest: #f2cc60;
--c-warning-dark: #9e6a03;
--c-warning-darker: #845306;
--c-warning-darkest: #693e00;
--c-warning-dimm-1: rgba(202, 138, 4, 0.12);
--c-warning-dimm-2: rgba(202, 138, 4, 0.2);
--c-warning-dimm-3: rgba(202, 138, 4, 0.28);
--c-warning-text: var(--c-warning-light);
--c-warning-text-light: var(--c-warning-lighter);
--c-warning-text-lighter: var(--c-warning-lightest);
--c-warning-text-dark: var(--c-warning);
--c-warning-text-darker: var(--c-warning-dark);
--c-warning-border: var(--c-warning-light);
--c-warning-border-light: var(--c-warning-lighter);
--c-warning-border-lighter: var(--c-warning-lightest);
--c-warning-border-dark: var(--c-warning);
--c-warning-border-darker: var(--c-warning-dark);
--c-warning-bg: var(--c-warning);
--c-warning-bg-light: var(--c-warning-light);
--c-warning-bg-lighter: var(--c-warning-lighter);
--c-warning-bg-dark: var(--c-warning-dark);
--c-warning-bg-darker: var(--c-warning-darker);

--c-danger: #da3633;
--c-danger-light: #f85149;
--c-danger-lighter: #ff7b72;
--c-danger-lghtest: #ffaba8;
--c-danger-dark: #b62324;
--c-danger-darker: #8e1519;
--c-danger-darkest: #67060c;
--c-danger-dimm-1: rgba(225, 29, 72, 0.12);
--c-danger-dimm-2: rgba(225, 29, 72, 0.2);
--c-danger-dimm-3: rgba(225, 29, 72, 0.28);
--c-danger-text: var(--c-danger-light);
--c-danger-text-light: var(--c-danger-lighter);
--c-danger-text-lighter: var(--c-danger-lightest);
--c-danger-text-dark: var(--c-danger);
--c-danger-text-darker: var(--c-danger-dark);
--c-danger-border: var(--c-danger-light);
--c-danger-border-light: var(--c-danger-lighter);
--c-danger-border-lighter: var(--c-danger-lightest);
--c-danger-border-dark: var(--c-danger);
--c-danger-border-darker: var(--c-danger-dark);
--c-danger-bg: var(--c-danger);
--c-danger-bg-light: var(--c-danger-light);
--c-danger-bg-lighter: var(--c-danger-lighter);
--c-danger-bg-dark: var(--c-danger-dark);
--c-danger-bg-darker: var(--c-danger-darker);
--c-text-info-1: var(--c-blue-10);
--c-text-info-2: var(--c-blue-9);
--c-text-info-3: var(--c-blue-8);

--c-text-success-1: var(--c-green-10);
--c-text-success-2: var(--c-green-9);
--c-text-success-3: var(--c-green-8);

--c-text-warning-1: var(--c-yellow-10);
--c-text-warning-2: var(--c-yellow-9);
--c-text-warning-3: var(--c-yellow-8);

--c-text-danger-1: var(--c-red-10);
--c-text-danger-2: var(--c-red-9);
--c-text-danger-3: var(--c-red-8);

--c-border-info-1: var(--c-blue-10);
--c-border-info-2: var(--c-blue-11);
--c-border-info-3: var(--c-blue-12);

--c-border-success-1: var(--c-green-10);
--c-border-success-2: var(--c-green-11);
--c-border-success-3: var(--c-green-12);

--c-border-warning-1: var(--c-yellow-10);
--c-border-warning-2: var(--c-yellow-11);
--c-border-warning-3: var(--c-yellow-12);

--c-border-danger-1: var(--c-red-10);
--c-border-danger-2: var(--c-red-11);
--c-border-danger-3: var(--c-red-12);

--c-fg-info-1: var(--c-blue-10);
--c-fg-info-2: var(--c-blue-11);
--c-fg-info-3: var(--c-blue-12);

--c-fg-success-1: var(--c-green-10);
--c-fg-success-2: var(--c-green-11);
--c-fg-success-3: var(--c-green-12);

--c-fg-warning-1: var(--c-yellow-10);
--c-fg-warning-2: var(--c-yellow-11);
--c-fg-warning-3: var(--c-yellow-12);

--c-fg-danger-1: var(--c-red-10);
--c-fg-danger-2: var(--c-red-11);
--c-fg-danger-3: var(--c-red-12);

--c-bg-info-1: var(--c-blue-9);
--c-bg-info-2: var(--c-blue-10);
--c-bg-info-3: var(--c-blue-11);
--c-bg-info-dimm-a1: var(--c-blue-a3);
--c-bg-info-dimm-a2: var(--c-blue-a4);

--c-bg-success-1: var(--c-green-9);
--c-bg-success-2: var(--c-green-10);
--c-bg-success-3: var(--c-green-11);
--c-bg-success-dimm-a1: var(--c-green-a3);
--c-bg-success-dimm-a2: var(--c-green-a4);

--c-bg-warning-1: var(--c-yellow-9);
--c-bg-warning-2: var(--c-yellow-10);
--c-bg-warning-3: var(--c-yellow-11);
--c-bg-warning-dimm-a1: var(--c-yellow-a3);
--c-bg-warning-dimm-a2: var(--c-yellow-a4);

--c-bg-danger-1: var(--c-red-9);
--c-bg-danger-2: var(--c-red-10);
--c-bg-danger-3: var(--c-red-11);
--c-bg-danger-dimm-a1: var(--c-red-a3);
--c-bg-danger-dimm-a2: var(--c-red-a4);
}
```

0 comments on commit 237af1f

Please sign in to comment.