diff options
author | Volpeon <git@volpeon.ink> | 2022-02-13 16:01:03 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-13 16:01:03 +0100 |
commit | a8d6946bbc6b4c835b2812ddb8eae98393777199 (patch) | |
tree | 5fa4bbfef96e72866e9b6b8152ea01eaeb106012 /src/_declare-vars.scss | |
parent | Update (diff) | |
download | iro-design-a8d6946bbc6b4c835b2812ddb8eae98393777199.tar.gz iro-design-a8d6946bbc6b4c835b2812ddb8eae98393777199.tar.bz2 iro-design-a8d6946bbc6b4c835b2812ddb8eae98393777199.zip |
Improved accent structure
Diffstat (limited to 'src/_declare-vars.scss')
-rw-r--r-- | src/_declare-vars.scss | 80 |
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 | ||