Skip to content

Commit 024f90e

Browse files
jd-solankijd-solanki
committed
refactor(css)!: CSS vars renamed
1 parent 84c5f1e commit 024f90e

File tree

22 files changed

+115
-99
lines changed

22 files changed

+115
-99
lines changed

‎docs/.vitepress/theme/style.css

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* Styles adjusting VitePress according to theme */
22
:root {
33
--vp-background: 0, 0%, 100%;
4-
--vp-c-text-1: hsla(var(--a-base-color), var(--a-text-emphasis-medium-opacity));
4+
--vp-c-text-1: hsla(var(--a-base-c), var(--a-text-emphasis-medium-opacity));
55
--vp-c-bg: hsl(var(--vp-background));
66
--vp-c-bg-alt: hsl(var(--vp-background));
77

@@ -41,7 +41,7 @@ SECTION VitePress
4141

4242
@media (min-width: 960px) {
4343
.VPNavBar>.container {
44-
border-bottom: thin solid hsla(var(--a-base-color), var(--a-border-opacity));
44+
border-bottom: thin solid hsla(var(--a-base-c), var(--a-border-opacity));
4545
}
4646
}
4747

@@ -71,7 +71,7 @@ SECTION VitePress
7171

7272
@media (min-width: 768px) {
7373
.VPNavBarSearch .DocSearch.DocSearch-Button {
74-
background-color: hsla(var(--a-base-color), 0.04) !important;
74+
background-color: hsla(var(--a-base-c), 0.04) !important;
7575
}
7676
}
7777

@@ -88,7 +88,7 @@ SECTION VitePress
8888
Enable below style for styled scrollbar
8989
*/
9090
/* .VPSidebar::-webkit-scrollbar {
91-
background: rgb(var(--a-layer));
91+
background: rgb(var(--a-layer-c));
9292
block-size: 8px;
9393
border-end-end-radius: 14px;
9494
border-start-end-radius: 14px;
@@ -127,7 +127,7 @@ SECTION VitePress
127127
}
128128

129129
.dark .vp-doc div[class*='language-']:not(:where(.vp-raw *)) {
130-
border: 1px solid hsla(var(--a-base-color), var(--a-border-opacity));
130+
border: 1px solid hsla(var(--a-base-c), var(--a-border-opacity));
131131
opacity: 0.85;
132132
font-weight: 500;
133133
}
@@ -137,13 +137,13 @@ SECTION VitePress
137137
========================== */
138138

139139
.cards-demo-container {
140-
/* rounded-lg border-dashed border border-a-border p-8 bg-[hsla(var(--a-base-color), .05)] */
140+
/* rounded-lg border-dashed border border-a-border p-8 bg-[hsla(var(--a-base-c), .05)] */
141141
@apply rounded-lg border-dashed border border-a-border p-8;
142-
background: hsla(var(--a-base-color), 0.05);
142+
background: hsla(var(--a-base-c), 0.05);
143143
}
144144

145145
.dark .cards-demo-container {
146-
background: hsla(var(--a-base-color), 0.01);
146+
background: hsla(var(--a-base-c), 0.01);
147147
}
148148

149149
/* ==========================
@@ -164,7 +164,7 @@ SECTION VitePress
164164
}
165165

166166
.VPHero.VPHomeHero .text {
167-
color: hsla(var(--a-base-color), 0.87)
167+
color: hsla(var(--a-base-c), 0.87)
168168
}
169169

170-
/* !SECTION */
170+
/* !SECTION */

‎docs/components/Api.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ const propsHeader = Object.keys(props.api.props[0])
1818
class="not-last-mb-4"
1919
>
2020
<span
21-
class="font-semibold text-[hsla(var(--a-title-color),var(--a-title-opacity))]"
21+
class="font-semibold text-[hsla(var(--a-title-c),var(--a-title-opacity))]"
2222
>{{ prop.name.replace('?', '') }}</span>
23-
<span class="text-[hsla(var(--a-base-color),var(--a-text-emphasis-light-opacity))]"> : {{ prop.type.replace(/\s*\| (undefined)$/, '') }}</span>
23+
<span class="text-[hsla(var(--a-base-c),var(--a-text-emphasis-light-opacity))]"> : {{ prop.type.replace(/\s*\| (undefined)$/, '') }}</span>
2424
<span
2525
v-if="prop.default !== 'unknown'"
26-
class="text-[hsla(var(--a-base-color),var(--a-text-emphasis-light-opacity))]"
26+
class="text-[hsla(var(--a-base-c),var(--a-text-emphasis-light-opacity))]"
2727
> = {{ prop.default }}</span>
2828
<div
2929
class="!children-[p]-m-0"

‎docs/components/demos/loader/DemoLoaderCustomization.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
<ALoader
66
color="primary"
7-
class="[--a-ring-color:hsla(var(--a-base-color),0.1)] [--a-ring-opacity:1] [--a-spin-duration:1.5s]"
7+
class="[--a-ring-color:hsla(var(--a-base-c),0.1)] [--a-ring-opacity:1] [--a-spin-duration:1.5s]"
88
/>
99

1010
<ALoader class="[--a-ring-stroke:0] [&_.a-spinner-arc]-stroke-cap-round rotate-y-180" />

‎docs/development/contributing.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,22 @@ At the moment, anu don't have any design system. Hence, we have full freedom to
106106
- Search [dribbble](https://dribbble.com/)
107107
:::
108108

109+
### CSS vars
110+
111+
We follow naming convention for CSS color vars. As we have theme colors CSS vars that has just HSL value and not full color (e.g. `--a-primary: 265, 97.7%, 66.3%`) and some other colors that are full color (e.g. `--a-switch-icon-color: hsla(0, 10%, 20%, 0.68)`), it's confusing while using the CSS var to identify if it's full color or just HSL value.
112+
113+
Due to this reason we follow below convention when deciding the name of CSS var that is color:
114+
115+
- suffix `-c` => For just HSL value (`--a-base-c: 0, 10%, 20%;`)
116+
- suffix `-color` => For full color (`--a-switch-icon-color: hsla(0, 10%, 20%, 0.68)`)
117+
- Don't suffix anything => For theme color (`--a-primary: 265, 97.7%, 66.3%`)
118+
119+
With above naming convention, we can clearly know if we should wrap the CSS var in `hsl()` or directly use it like a color value.
120+
121+
:::warning
122+
Don't forget to follow this convention when defining any CSS var for color, including background (`--a-something-bg-color: hsl(var(--a-surface-c))`)
123+
:::
124+
109125
### Creating new component
110126

111127
First of all, it is advisable to discuss the design & features of the component by opening the new [issue](https://github.com/jd-solanki/anu/issues/new). E.g. [New component: Menu](https://github.com/jd-solanki/anu/issues/26)

‎docs/guide/getting-started/customization.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
2-
import { useCssVar } from '@vueuse/core'
3-
import { computed, onMounted } from 'vue';
2+
import { useCssVar } from '@vueuse/core';
3+
import { computed } from 'vue';
44

55
const primaryColor = useCssVar('--a-primary')
66
const vpBrandHue = useCssVar('--vp-brand-hue')
@@ -34,15 +34,15 @@ To customize theme color, set a CSS variable in your CSS with color name prefixe
3434

3535
## CSS variables
3636

37-
Besides colors, Anu uses CSS variables for other stuff like typography customization. All anu's CSS variables are prefixed with `a-`.
37+
Besides colors, Anu uses CSS variables for other stuff for providing maximum flexibility and customization on the fly. All anu's CSS variables are prefixed with `a-`.
3838

39-
Interesting ones are listed below:
39+
:::details View all CSS vars
40+
Below is CSS vars defined for preset theme default's light theme:
4041

41-
| CSS variables | Usage |
42-
| :--------------------------------- | :--------------------------- |
43-
| `--a-text-emphasis-high-opacity` | High priority text opacity |
44-
| `--a-text-emphasis-medium-opacity` | Medium priority text opacity |
45-
| `--a-text-emphasis-light-opacity` | Low priority text opacity |
42+
<<< @/../packages/preset-theme-default/src/scss/index.scss#all-css-vars
43+
:::
44+
45+
Moreover, It's recommended that you [learn](/development/contributing.html#css-vars) CSS vars naming convention for color to know when you should wrap `hsl()` or use CSS var directly.
4646

4747
## Component customization
4848

‎packages/anu-vue/src/components/btn/ABtn.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const { styles, classes } = getLayerClasses(
6363
<template v-if="props.icon">
6464
<ALoader
6565
v-if="props.loading"
66-
class="[--a-loader-overlay-bg:transparent]"
66+
class="[--a-loader-overlay-bg-c:transparent]"
6767
/>
6868
<i
6969
v-else

‎packages/anu-vue/src/components/card/ACard.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ else
3636

3737
<template>
3838
<div
39-
class="a-card relative overflow-hidden bg-[hsla(var(--a-surface),var(--un-bg-opacity,1))]"
39+
class="a-card relative overflow-hidden bg-[hsla(var(--a-surface-c),var(--un-bg-opacity,1))]"
4040
:class="classes"
4141
:style="[
4242
...styles,

‎packages/anu-vue/src/components/dialog/ADialog.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ useDOMScrollLock(toRef(props, 'modelValue') as Ref<boolean>)
5353
<Transition name="bg">
5454
<div
5555
v-show="props.modelValue"
56-
class="a-dialog-wrapper grid place-items-center fixed inset-0 bg-[hsla(var(--a-overlay-color),var(--a-overlay-opacity))]"
56+
class="a-dialog-wrapper grid place-items-center fixed inset-0 bg-[hsla(var(--a-overlay-c),var(--a-overlay-opacity))]"
5757
>
5858
<Transition name="scale">
5959
<ACard

‎packages/anu-vue/src/components/drawer/ADrawer.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ useDOMScrollLock(toRef(props, 'modelValue') as Ref<boolean>)
6161
<Transition name="bg">
6262
<div
6363
v-show="props.modelValue"
64-
class="a-drawer-wrapper flex fixed inset-0 bg-[hsla(var(--a-overlay-color),var(--a-overlay-opacity))]"
64+
class="a-drawer-wrapper flex fixed inset-0 bg-[hsla(var(--a-overlay-c),var(--a-overlay-opacity))]"
6565
:class="[
6666
`a-drawer-anchor-${props.anchor}`,
6767
// `flex-col` set full width for top & bottom anchored drawer

‎packages/anu-vue/src/components/loader/ALoader.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ if (props.fullPage) {
4545
</script>
4646

4747
<template>
48-
<!-- TODO: Use loader's CSS color instead of layer color: bg-[hsla(var(--a-layer),0.85)] -->
48+
<!-- TODO: Use loader's CSS color instead of layer color: bg-[hsla(var(--a-layer-c),0.85)] -->
4949
<div
5050
v-if="isShownOnce"
5151
v-show="props.loading"
@@ -55,7 +55,7 @@ if (props.fullPage) {
5555
]"
5656
>
5757
<div
58-
:style="{ background: props.overlay ? 'hsla(var(--a-loader-overlay-bg),var(--a-loader-overlay-bg-opacity))' : undefined }"
58+
:style="{ background: props.overlay ? 'hsla(var(--a-loader-overlay-bg-c),var(--a-loader-overlay-bg-opacity))' : undefined }"
5959
class="a-loader-overlay"
6060
:class="[
6161
(props.overlay || props.fullPage) && 'w-full h-full flex flex-col gap-3 items-center justify-center overflow-hidden',

0 commit comments

Comments
 (0)