summaryrefslogtreecommitdiffstats
path: root/src/_vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_vars.scss')
-rw-r--r--src/_vars.scss71
1 files changed, 27 insertions, 44 deletions
diff --git a/src/_vars.scss b/src/_vars.scss
index 825ec9c..fd369f7 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -85,11 +85,19 @@ media.$unit-intervals: (
85 85
86// 86//
87 87
88@include iro.fn-execute { 88@function accent-palette($base) {
89 $primary-accent-base: hsl(222, 49.8%, 52.4%); 89 @return (
90 $error-accent-base: hsl(352, 49.8%, 52.4%); 90 --hi: scale-color($base, $lightness: 15%),
91 $success-accent-base: hsl(113, 49.8%, 39.6%); 91 --main: $base,
92 --lo: scale-color($base, $lightness: -15%),
93 --lo2: scale-color($base, $lightness: -25%),
94 --semi: rgba($base, .4),
95 --selection: rgba($base, .99),
96 --fg: #fff,
97 );
98}
92 99
100@include iro.fn-execute {
93 @include iro.props-store(( 101 @include iro.props-store((
94 --colors: ( 102 --colors: (
95 --bg-hi2: fn.color(--gray1, null), // Lightest background 103 --bg-hi2: fn.color(--gray1, null), // Lightest background
@@ -107,52 +115,27 @@ media.$unit-intervals: (
107 --fg-lo: fn.color(--gray11, null), // Strong text 115 --fg-lo: fn.color(--gray11, null), // Strong text
108 116
109 --accent: ( 117 --accent: (
110 --primary-const-hi: scale-color($primary-accent-base, $lightness: 15%), 118 --blue: accent-palette(hsl(222, 49.8%, 52.4%)),
111 --primary-const: $primary-accent-base, 119 --red: accent-palette(hsl(352, 49.8%, 52.4%)),
112 --primary-const-lo: scale-color($primary-accent-base, $lightness: -15%), 120 --green: accent-palette(hsl(113, 49.8%, 39.6%)),
113 --primary-const-lo2: scale-color($primary-accent-base, $lightness: -25%), 121 --yellow: accent-palette(hsl(50, 59.8%, 52.4%)),
114 --primary-const-semi: rgba($primary-accent-base, .4), 122
115 --primary-const-selection: rgba($primary-accent-base, .99), 123 --primary: iro.props-ref('colors', --colors --accent --blue),
116 --primary-const-fg: #fff, 124 --error: iro.props-ref('colors', --colors --accent --red),
117 125 --success: iro.props-ref('colors', --colors --accent --green),
118 --primary-hi: fn.color(--accent --primary-const-hi, null),
119 --primary: fn.color(--accent --primary-const, null),
120 --primary-lo: fn.color(--accent --primary-const-lo, null),
121 --primary-lo2: fn.color(--accent --primary-const-lo2, null),
122 --primary-fg: fn.color(--accent --primary-const-fg, null),
123
124 --error-hi: scale-color($error-accent-base, $lightness: 15%),
125 --error: $error-accent-base,
126 --error-lo: scale-color($error-accent-base, $lightness: -15%),
127 --error-lo2: scale-color($error-accent-base, $lightness: -25%),
128 --error-fg: #fff,
129
130 --success-hi: scale-color($success-accent-base, $lightness: 15%),
131 --success: $success-accent-base,
132 --success-lo: scale-color($success-accent-base, $lightness: -15%),
133 --success-lo2: scale-color($success-accent-base, $lightness: -25%),
134 --success-fg: #fff,
135 ),
136
137 --grayscale-accent: (
138 --primary-hi: fn.color(--fg-hi2, null),
139 --primary: fn.color(--fg-hi, null),
140 --primary-lo: fn.color(--fg, null),
141 --primary-lo2: fn.color(--fg-lo, null),
142 --primary-fg: #fff,
143 ), 126 ),
144 127
145 --selection: ( 128 --selection: (
146 --bg: fn.color(--accent --primary-const-selection, null), 129 --bg: fn.color(--accent --primary --selection, null),
147 --bg-img: fn.color(--accent --primary-const-semi, null), 130 --bg-img: fn.color(--accent --primary --semi, null),
148 --fg: fn.color(--accent --primary-const-fg, null), 131 --fg: fn.color(--accent --primary --fg, null),
149 ), 132 ),
150 133
151 --focus: ( 134 --focus: (
152 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary-const-semi, null), 135 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
153 --fill: fn.color(--accent --primary-const, null), 136 --fill: fn.color(--accent --primary --main, null),
154 --text: fn.color(--accent --primary-const-lo, null), 137 --text: fn.color(--accent --primary --lo, null),
155 --fill-text: fn.color(--accent --primary-const-fg, null), 138 --fill-text: fn.color(--accent --primary --fg, null),
156 ), 139 ),
157 ), 140 ),
158 ), 'colors'); 141 ), 'colors');