diff options
Diffstat (limited to 'src/_declare-vars.scss')
-rw-r--r-- | src/_declare-vars.scss | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss new file mode 100644 index 0000000..38d39dd --- /dev/null +++ b/src/_declare-vars.scss | |||
@@ -0,0 +1,160 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use 'include-media/dist/include-media' as media; | ||
3 | @use '@oddbird/blend'; | ||
4 | @use 'functions' as fn; | ||
5 | |||
6 | @include iro.props-store(( | ||
7 | --dims: ( | ||
8 | --spacing: ( | ||
9 | --base: iro.fn-px-to-rem(24px), | ||
10 | --factors: ( | ||
11 | --xxs: .125, | ||
12 | --xs: .25, | ||
13 | --sm: .5, | ||
14 | --md: 1, | ||
15 | --lg: 1.5, | ||
16 | --xl: 2, | ||
17 | --xxl: 2.5, | ||
18 | ), | ||
19 | --xxs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxs, null)), | ||
20 | --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)), | ||
21 | --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)), | ||
22 | --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)), | ||
23 | --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)), | ||
24 | --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)), | ||
25 | --xxl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxl, null)), | ||
26 | ), | ||
27 | |||
28 | --font: ( | ||
29 | --standard: ( | ||
30 | --family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif), | ||
31 | --line-height: 1.5, | ||
32 | ), | ||
33 | --headline: ( | ||
34 | --family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif), | ||
35 | --line-height: 1.2, | ||
36 | --weight: 700, | ||
37 | ) | ||
38 | ), | ||
39 | |||
40 | --font-size: ( | ||
41 | --xs: iro.fn-px-to-rem(11px), | ||
42 | --sm: iro.fn-px-to-rem(13px), | ||
43 | --md: iro.fn-px-to-rem(14px), | ||
44 | --lg: iro.fn-px-to-rem(16px), | ||
45 | --xl: iro.fn-px-to-rem(18px), | ||
46 | --xxl: iro.fn-px-to-rem(22px), | ||
47 | --xxxl: iro.fn-px-to-rem(28px), | ||
48 | ), | ||
49 | |||
50 | --border-width: ( | ||
51 | --thick: 4px, | ||
52 | --medium: 2px, | ||
53 | --thin: 1px, | ||
54 | ), | ||
55 | |||
56 | --focus-outline-width: 3px, | ||
57 | |||
58 | --paragraph: ( | ||
59 | --margin-top: fn.dim(--spacing --sm, null), | ||
60 | ), | ||
61 | |||
62 | --list: ( | ||
63 | --indent: 3rem, | ||
64 | ), | ||
65 | ), | ||
66 | ), 'dims'); | ||
67 | |||
68 | // | ||
69 | |||
70 | @include iro.fn-execute { | ||
71 | @include iro.props-store(( | ||
72 | --colors: ( | ||
73 | --gray-h: 220, | ||
74 | --gray-s: 5%, | ||
75 | |||
76 | --bg-hi2: fn.color(--gray1, null), // Lightest background | ||
77 | --bg-hi: fn.color(--gray2, null), // Lighter background | ||
78 | --bg: fn.color(--gray3, null), // Background | ||
79 | |||
80 | --obj-hi: fn.color(--gray4, null), | ||
81 | --obj: fn.color(--gray5, null), | ||
82 | --obj-lo: fn.color(--gray6, null), | ||
83 | |||
84 | --fg-hi3: fn.color(--gray7, null), // Disabled text | ||
85 | --fg-hi2: fn.color(--gray8, null), // Placeholder text | ||
86 | --fg-hi: fn.color(--gray9, null), // Faint text | ||
87 | --fg: fn.color(--gray10, null), // Text | ||
88 | --fg-lo: fn.color(--gray11, null), // Strong text | ||
89 | |||
90 | --accent: ( | ||
91 | --blue: fn.accent-palette(blend.lch(48% 50 279)), | ||
92 | --red: fn.accent-palette(blend.lch(48% 50 23)), | ||
93 | --green: fn.accent-palette(blend.lch(58% 50 141)), | ||
94 | --yellow: fn.accent-palette(blend.lch(73% 50 90)), | ||
95 | |||
96 | --primary: iro.props-ref('colors', --colors --accent --blue), | ||
97 | --error: iro.props-ref('colors', --colors --accent --red), | ||
98 | --success: iro.props-ref('colors', --colors --accent --green), | ||
99 | ), | ||
100 | |||
101 | --selection: ( | ||
102 | --bg: fn.color(--accent --primary --selection, null), | ||
103 | --bg-img: fn.color(--accent --primary --semi, null), | ||
104 | --fg: fn.color(--accent --primary --fg, null), | ||
105 | ), | ||
106 | |||
107 | --focus: ( | ||
108 | --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null), | ||
109 | --fill: fn.color(--accent --primary --main, null), | ||
110 | --text: fn.color(--accent --primary --lo, null), | ||
111 | --fill-text: fn.color(--accent --primary --fg, null), | ||
112 | ), | ||
113 | ), | ||
114 | ), 'colors'); | ||
115 | |||
116 | @include iro.props-store(( | ||
117 | --colors: fn.gray-palette(94%) | ||
118 | ), 'palette-light'); | ||
119 | |||
120 | @include iro.props-store(( | ||
121 | --colors: fn.gray-palette(100%) | ||
122 | ), 'palette-light-raised'); | ||
123 | } | ||
124 | |||
125 | // | ||
126 | |||
127 | @include iro.fn-execute { | ||
128 | @include iro.props-store(( | ||
129 | --colors: ( | ||
130 | --accent: ( | ||
131 | --blue: fn.accent-palette(blend.lch(58% 60 279), -1), | ||
132 | --red: fn.accent-palette(blend.lch(58% 60 23), -1), | ||
133 | --green: fn.accent-palette(blend.lch(68% 60 141), -1), | ||
134 | --yellow: fn.accent-palette(blend.lch(83% 60 90), -1), | ||
135 | |||
136 | --primary: iro.props-ref('colors-dark', --colors --accent --blue), | ||
137 | --error: iro.props-ref('colors-dark', --colors --accent --red), | ||
138 | --success: iro.props-ref('colors-dark', --colors --accent --green), | ||
139 | ), | ||
140 | ) | ||
141 | ), 'colors-dark'); | ||
142 | |||
143 | @include iro.props-store(( | ||
144 | --colors: fn.gray-palette(9%) | ||
145 | ), 'palette-dark'); | ||
146 | |||
147 | @include iro.props-store(( | ||
148 | --colors: fn.gray-palette(16%) | ||
149 | ), 'palette-dark-raised'); | ||
150 | } | ||
151 | |||
152 | // | ||
153 | |||
154 | @each $breakpoint in map-keys(media.$breakpoints) { | ||
155 | @include media.media('<=#{$breakpoint}') { | ||
156 | @include iro.props-store(( | ||
157 | --colors: () | ||
158 | ), $breakpoint); | ||
159 | } | ||
160 | } | ||