summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-13 19:54:26 +0100
committerVolpeon <git@volpeon.ink>2022-02-13 19:54:26 +0100
commit8fdc53f4c8125140624da087a2b05b60397e6c7e (patch)
tree4aeefaf2f8b5277932831eda3eda726d43571e73 /src
parentImproved colors (diff)
downloadiro-design-8fdc53f4c8125140624da087a2b05b60397e6c7e.tar.gz
iro-design-8fdc53f4c8125140624da087a2b05b60397e6c7e.tar.bz2
iro-design-8fdc53f4c8125140624da087a2b05b60397e6c7e.zip
Fix dialog+backdrop
Diffstat (limited to 'src')
-rw-r--r--src/_declare-vars.scss150
-rw-r--r--src/objects/_backdrop.scss1
-rw-r--r--src/objects/_dialog.scss2
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);
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 07:58:28 +0000