diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/_declare-vars.scss | 150 | ||||
-rw-r--r-- | src/objects/_backdrop.scss | 1 | ||||
-rw-r--r-- | src/objects/_dialog.scss | 2 |
3 files changed, 76 insertions, 77 deletions
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index a9b4d0a..d81b299 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss | |||
@@ -67,93 +67,89 @@ | |||
67 | 67 | ||
68 | // | 68 | // |
69 | 69 | ||
70 | @include iro.fn-execute { | 70 | @include iro.props-store(( |
71 | @include iro.props-store(( | 71 | --colors: ( |
72 | --colors: ( | 72 | --bg-hi2: fn.color(--gray --1, null), // Lightest background |
73 | --bg-hi2: fn.color(--gray --1, null), // Lightest background | 73 | --bg-hi: fn.color(--gray --2, null), // Lighter background |
74 | --bg-hi: fn.color(--gray --2, null), // Lighter background | 74 | --bg: fn.color(--gray --3, null), // Background |
75 | --bg: fn.color(--gray --3, null), // Background | 75 | |
76 | 76 | --obj-hi: fn.color(--gray --4, null), | |
77 | --obj-hi: fn.color(--gray --4, null), | 77 | --obj: fn.color(--gray --5, null), |
78 | --obj: fn.color(--gray --5, null), | 78 | --obj-lo: fn.color(--gray --6, null), |
79 | --obj-lo: fn.color(--gray --6, null), | 79 | |
80 | 80 | --fg-hi3: fn.color(--gray --7, null), // Disabled text | |
81 | --fg-hi3: fn.color(--gray --7, null), // Disabled text | 81 | --fg-hi2: fn.color(--gray --8, null), // Placeholder text |
82 | --fg-hi2: fn.color(--gray --8, null), // Placeholder text | 82 | --fg-hi: fn.color(--gray --9, null), // Faint text |
83 | --fg-hi: fn.color(--gray --9, null), // Faint text | 83 | --fg: fn.color(--gray --10, null), // Text |
84 | --fg: fn.color(--gray --10, null), // Text | 84 | --fg-lo: fn.color(--gray --11, null), // Strong text |
85 | --fg-lo: fn.color(--gray --11, null), // Strong text | 85 | |
86 | 86 | --gray: ( --h: 220, --s: 5% ), | |
87 | --gray: ( --h: 220, --s: 5% ), | 87 | --blue: fn.color-palette(blend.lch(48% 50 279)), |
88 | --blue: fn.color-palette(blend.lch(48% 50 279)), | 88 | --red: fn.color-palette(blend.lch(48% 50 23)), |
89 | --red: fn.color-palette(blend.lch(48% 50 23)), | 89 | --green: fn.color-palette(blend.lch(63% 50 147)), |
90 | --green: fn.color-palette(blend.lch(63% 50 147)), | 90 | --yellow: fn.color-palette(blend.lch(73% 50 80)), |
91 | --yellow: fn.color-palette(blend.lch(73% 50 80)), | 91 | |
92 | 92 | --accent: ( | |
93 | --accent: ( | 93 | --primary: iro.props-ref('colors', --colors --blue), |
94 | --primary: iro.props-ref('colors', --colors --blue), | 94 | --error: iro.props-ref('colors', --colors --red), |
95 | --error: iro.props-ref('colors', --colors --red), | 95 | --success: iro.props-ref('colors', --colors --green), |
96 | --success: iro.props-ref('colors', --colors --green), | ||
97 | ), | ||
98 | |||
99 | --selection: ( | ||
100 | --bg: fn.color(--accent --primary --selection, null), | ||
101 | --bg-img: fn.color(--accent --primary --semi, null), | ||
102 | --fg: fn.color(--accent --primary --fg, null), | ||
103 | ), | ||
104 | |||
105 | --focus: ( | ||
106 | --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null), | ||
107 | --fill: fn.color(--accent --primary --bg, null), | ||
108 | --text: fn.color(--accent --primary --lo, null), | ||
109 | --fill-text: fn.color(--accent --primary --fg, null), | ||
110 | ), | ||
111 | ), | 96 | ), |
112 | ), 'colors'); | ||
113 | 97 | ||
114 | @include iro.props-store(( | 98 | --selection: ( |
115 | --colors: ( | 99 | --bg: fn.color(--accent --primary --selection, null), |
116 | --gray: fn.gray-palette(94%), | 100 | --bg-img: fn.color(--accent --primary --semi, null), |
101 | --fg: fn.color(--accent --primary --fg, null), | ||
117 | ), | 102 | ), |
118 | ), 'palette-light'); | ||
119 | 103 | ||
120 | @include iro.props-store(( | 104 | --focus: ( |
121 | --colors: ( | 105 | --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null), |
122 | --gray: fn.gray-palette(100%), | 106 | --fill: fn.color(--accent --primary --bg, null), |
107 | --text: fn.color(--accent --primary --lo, null), | ||
108 | --fill-text: fn.color(--accent --primary --fg, null), | ||
123 | ), | 109 | ), |
124 | ), 'palette-light-raised'); | 110 | ), |
125 | } | 111 | ), 'colors'); |
126 | 112 | ||
127 | // | 113 | @include iro.props-store(( |
114 | --colors: ( | ||
115 | --gray: fn.gray-palette(94%), | ||
116 | ), | ||
117 | ), 'palette-light'); | ||
128 | 118 | ||
129 | @include iro.fn-execute { | 119 | @include iro.props-store(( |
130 | @include iro.props-store(( | 120 | --colors: ( |
131 | --colors: ( | 121 | --gray: fn.gray-palette(100%), |
132 | --blue: fn.color-palette(blend.lch(58% 60 279), -1), | 122 | ), |
133 | --red: fn.color-palette(blend.lch(58% 60 23), -1), | 123 | ), 'palette-light-raised'); |
134 | --green: fn.color-palette(blend.lch(73% 60 147), -1), | ||
135 | --yellow: fn.color-palette(blend.lch(83% 60 80), -1), | ||
136 | |||
137 | --accent: ( | ||
138 | --primary: iro.props-ref('colors-dark', --colors --blue), | ||
139 | --error: iro.props-ref('colors-dark', --colors --red), | ||
140 | --success: iro.props-ref('colors-dark', --colors --green), | ||
141 | ), | ||
142 | ) | ||
143 | ), 'colors-dark'); | ||
144 | 124 | ||
145 | @include iro.props-store(( | 125 | // |
146 | --colors: ( | ||
147 | --gray: fn.gray-palette(9%), | ||
148 | ), | ||
149 | ), 'palette-dark'); | ||
150 | 126 | ||
151 | @include iro.props-store(( | 127 | @include iro.props-store(( |
152 | --colors: ( | 128 | --colors: ( |
153 | --gray: fn.gray-palette(16%), | 129 | --blue: fn.color-palette(blend.lch(58% 60 279), -1), |
130 | --red: fn.color-palette(blend.lch(58% 60 23), -1), | ||
131 | --green: fn.color-palette(blend.lch(73% 60 147), -1), | ||
132 | --yellow: fn.color-palette(blend.lch(83% 60 80), -1), | ||
133 | |||
134 | --accent: ( | ||
135 | --primary: iro.props-ref('colors-dark', --colors --blue), | ||
136 | --error: iro.props-ref('colors-dark', --colors --red), | ||
137 | --success: iro.props-ref('colors-dark', --colors --green), | ||
154 | ), | 138 | ), |
155 | ), 'palette-dark-raised'); | 139 | ) |
156 | } | 140 | ), 'colors-dark'); |
141 | |||
142 | @include iro.props-store(( | ||
143 | --colors: ( | ||
144 | --gray: fn.gray-palette(9%), | ||
145 | ), | ||
146 | ), 'palette-dark'); | ||
147 | |||
148 | @include iro.props-store(( | ||
149 | --colors: ( | ||
150 | --gray: fn.gray-palette(16%), | ||
151 | ), | ||
152 | ), 'palette-dark-raised'); | ||
157 | 153 | ||
158 | // | 154 | // |
159 | 155 | ||
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss index 34ce46a..ddf4ea0 100644 --- a/src/objects/_backdrop.scss +++ b/src/objects/_backdrop.scss | |||
@@ -37,6 +37,7 @@ | |||
37 | bottom: 0; | 37 | bottom: 0; |
38 | left: 0; | 38 | left: 0; |
39 | box-sizing: border-box; | 39 | box-sizing: border-box; |
40 | flex-direction: column; | ||
40 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | 41 | padding: fn.dim(--pad-y) fn.dim(--pad-x); |
41 | background-color: fn.color(--bg); | 42 | background-color: fn.color(--bg); |
42 | } | 43 | } |
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index 22325f4..45af8b6 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss | |||
@@ -25,6 +25,8 @@ | |||
25 | grid-template-rows: auto auto 1fr auto; | 25 | grid-template-rows: auto auto 1fr auto; |
26 | grid-template-areas: 'header' 'rule' 'body' 'footer'; | 26 | grid-template-areas: 'header' 'rule' 'body' 'footer'; |
27 | position: relative; | 27 | position: relative; |
28 | box-sizing: border-box; | ||
29 | width: 100%; | ||
28 | max-width: fn.dim(--width-md); | 30 | max-width: fn.dim(--width-md); |
29 | margin: 0 auto; | 31 | margin: 0 auto; |
30 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | 32 | padding: fn.dim(--pad-y) fn.dim(--pad-x); |