summaryrefslogtreecommitdiffstats
path: root/src/_declare-vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_declare-vars.scss')
-rw-r--r--src/_declare-vars.scss80
1 files changed, 43 insertions, 37 deletions
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index fa6de76..44b7d0e 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -70,32 +70,30 @@
70@include iro.fn-execute { 70@include iro.fn-execute {
71 @include iro.props-store(( 71 @include iro.props-store((
72 --colors: ( 72 --colors: (
73 --gray-h: 220, 73 --bg-hi2: fn.color(--gray --1, null), // Lightest background
74 --gray-s: 5%, 74 --bg-hi: fn.color(--gray --2, null), // Lighter background
75 75 --bg: fn.color(--gray --3, null), // Background
76 --bg-hi2: fn.color(--gray1, null), // Lightest background 76
77 --bg-hi: fn.color(--gray2, null), // Lighter background 77 --obj-hi: fn.color(--gray --4, null),
78 --bg: fn.color(--gray3, null), // Background 78 --obj: fn.color(--gray --5, null),
79 79 --obj-lo: fn.color(--gray --6, null),
80 --obj-hi: fn.color(--gray4, null), 80
81 --obj: fn.color(--gray5, null), 81 --fg-hi3: fn.color(--gray --7, null), // Disabled text
82 --obj-lo: fn.color(--gray6, null), 82 --fg-hi2: fn.color(--gray --8, null), // Placeholder text
83 83 --fg-hi: fn.color(--gray --9, null), // Faint text
84 --fg-hi3: fn.color(--gray7, null), // Disabled text 84 --fg: fn.color(--gray --10, null), // Text
85 --fg-hi2: fn.color(--gray8, null), // Placeholder text 85 --fg-lo: fn.color(--gray --11, null), // Strong text
86 --fg-hi: fn.color(--gray9, null), // Faint text 86
87 --fg: fn.color(--gray10, null), // Text 87 --gray: ( --h: 220, --s: 5% ),
88 --fg-lo: fn.color(--gray11, null), // Strong text 88 --blue: fn.color-palette(blend.lch(48% 50 279)),
89 --red: fn.color-palette(blend.lch(48% 50 23)),
90 --green: fn.color-palette(blend.lch(63% 50 141)),
91 --yellow: fn.color-palette(blend.lch(73% 50 90)),
89 92
90 --accent: ( 93 --accent: (
91 --blue: fn.accent-palette(blend.lch(48% 50 279)), 94 --primary: iro.props-ref('colors', --colors --blue),
92 --red: fn.accent-palette(blend.lch(48% 50 23)), 95 --error: iro.props-ref('colors', --colors --red),
93 --green: fn.accent-palette(blend.lch(58% 50 141)), 96 --success: iro.props-ref('colors', --colors --green),
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 ), 97 ),
100 98
101 --selection: ( 99 --selection: (
@@ -106,7 +104,7 @@
106 104
107 --focus: ( 105 --focus: (
108 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null), 106 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
109 --fill: fn.color(--accent --primary --main, null), 107 --fill: fn.color(--accent --primary --bg, null),
110 --text: fn.color(--accent --primary --lo, null), 108 --text: fn.color(--accent --primary --lo, null),
111 --fill-text: fn.color(--accent --primary --fg, null), 109 --fill-text: fn.color(--accent --primary --fg, null),
112 ), 110 ),
@@ -114,11 +112,15 @@
114 ), 'colors'); 112 ), 'colors');
115 113
116 @include iro.props-store(( 114 @include iro.props-store((
117 --colors: fn.gray-palette(94%) 115 --colors: (
116 --gray: fn.gray-palette(94%),
117 ),
118 ), 'palette-light'); 118 ), 'palette-light');
119 119
120 @include iro.props-store(( 120 @include iro.props-store((
121 --colors: fn.gray-palette(100%) 121 --colors: (
122 --gray: fn.gray-palette(100%),
123 ),
122 ), 'palette-light-raised'); 124 ), 'palette-light-raised');
123} 125}
124 126
@@ -127,25 +129,29 @@
127@include iro.fn-execute { 129@include iro.fn-execute {
128 @include iro.props-store(( 130 @include iro.props-store((
129 --colors: ( 131 --colors: (
132 --blue: fn.color-palette(blend.lch(58% 60 279), -1),
133 --red: fn.color-palette(blend.lch(58% 60 23), -1),
134 --green: fn.color-palette(blend.lch(73% 60 141), -1),
135 --yellow: fn.color-palette(blend.lch(83% 60 90), -1),
136
130 --accent: ( 137 --accent: (
131 --blue: fn.accent-palette(blend.lch(58% 60 279), -1), 138 --primary: iro.props-ref('colors-dark', --colors --blue),
132 --red: fn.accent-palette(blend.lch(58% 60 23), -1), 139 --error: iro.props-ref('colors-dark', --colors --red),
133 --green: fn.accent-palette(blend.lch(68% 60 141), -1), 140 --success: iro.props-ref('colors-dark', --colors --green),
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 ), 141 ),
140 ) 142 )
141 ), 'colors-dark'); 143 ), 'colors-dark');
142 144
143 @include iro.props-store(( 145 @include iro.props-store((
144 --colors: fn.gray-palette(9%) 146 --colors: (
147 --gray: fn.gray-palette(9%),
148 ),
145 ), 'palette-dark'); 149 ), 'palette-dark');
146 150
147 @include iro.props-store(( 151 @include iro.props-store((
148 --colors: fn.gray-palette(16%) 152 --colors: (
153 --gray: fn.gray-palette(16%),
154 ),
149 ), 'palette-dark-raised'); 155 ), 'palette-dark-raised');
150} 156}
151 157