summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-06-10 21:13:39 +0200
committerVolpeon <git@volpeon.ink>2022-06-10 21:13:39 +0200
commitc93948dbc7790d1c36a7e36df4e5485ca249cc37 (patch)
treec3ed0ab1f62e22e802438650d314da84fd02b8da
parentAdded fixed table modifier (diff)
downloadiro-design-c93948dbc7790d1c36a7e36df4e5485ca249cc37.tar.gz
iro-design-c93948dbc7790d1c36a7e36df4e5485ca249cc37.tar.bz2
iro-design-c93948dbc7790d1c36a7e36df4e5485ca249cc37.zip
Added code and blockquote styles, better headings, various other updates
Diffstat
-rw-r--r--.gitignore1
-rw-r--r--src/_base.scss17
-rw-r--r--src/_config.scss6
-rw-r--r--src/_declare-vars.scss23
-rw-r--r--src/_functions.scss1
-rw-r--r--src/_scopes.scss2
-rw-r--r--src/layouts/_card.scss1
-rw-r--r--src/layouts/_container.scss1
-rw-r--r--src/objects/_alert.scss8
-rw-r--r--src/objects/_heading.scss37
-rw-r--r--src/scopes/_blockquote.scss25
-rw-r--r--src/scopes/_code.scss59
-rw-r--r--src_demo/_base.scss8
-rw-r--r--tpl/index.pug4
-rw-r--r--tpl/objects/heading.pug16
-rw-r--r--tpl/views/blockquote.pug6
-rw-r--r--tpl/views/code.pug13
-rw-r--r--tpl/views/heading.pug10
18 files changed, 202 insertions, 36 deletions
diff --git a/.gitignore b/.gitignore
index 36170a7..0e8837b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
1node_modules 1node_modules
2public 2public
3static/garet.woff2
diff --git a/src/_base.scss b/src/_base.scss
index a0f785c..f861f5e 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -2,6 +2,7 @@
2@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
3@use 'functions' as fn; 3@use 'functions' as fn;
4@use 'mixins' as mx; 4@use 'mixins' as mx;
5@use 'config';
5 6
6html, 7html,
7body { 8body {
@@ -17,6 +18,12 @@ body {
17 color: fn.color(--fg); 18 color: fn.color(--fg);
18} 19}
19 20
21html,
22pre,
23code {
24 font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
25}
26
20pre, 27pre,
21code { 28code {
22 @include mx.set-font(--mono, (--size: fn.dim(--font-size --75))); 29 @include mx.set-font(--mono, (--size: fn.dim(--font-size --75)));
@@ -38,10 +45,12 @@ h3,
38h4, 45h4,
39h5, 46h5,
40h6 { 47h6 {
41 margin: 0; 48 margin: 0;
42 color: fn.color(--fg-lo); 49 color: fn.color(--fg-lo);
43 font-size: 1em; 50 font-size: fn.dim(--font-size --100);
44 font-weight: bold; 51 font-weight: bold;
52 letter-spacing: 1px;
53 text-transform: uppercase;
45} 54}
46 55
47p { 56p {
diff --git a/src/_config.scss b/src/_config.scss
index 68df69f..26a1ad4 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -4,8 +4,10 @@
4iro.$vars-root-size: 16px; 4iro.$vars-root-size: 16px;
5 5
6media.$breakpoints: ( 6media.$breakpoints: (
7 md: 40rem, 7 lg: 1340px,
8 sm: 28rem 8 md: 900px,
9 sm: 600px,
10 xs: 400px,
9); 11);
10 12
11media.$unit-intervals: ( 13media.$unit-intervals: (
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 8ef68be..fcd281b 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -59,7 +59,7 @@
59 --line-height: 1.5, 59 --line-height: 1.5,
60 ), 60 ),
61 --headline: ( 61 --headline: (
62 --family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif), 62 --family: ('Garet', fn.dim(--font --standard --family, null)),
63 --line-height: 1.2, 63 --line-height: 1.2,
64 --weight: 700, 64 --weight: 700,
65 ), 65 ),
@@ -70,13 +70,20 @@
70 ), 70 ),
71 71
72 --font-size: ( 72 --font-size: (
73 --50: iro.fn-px-to-rem(11px), 73 --50: iro.fn-px-to-rem(11px),
74 --75: iro.fn-px-to-rem(13px), 74 --75: iro.fn-px-to-rem(13px),
75 --100: iro.fn-px-to-rem(14px), 75 --100: iro.fn-px-to-rem(14px),
76 --150: iro.fn-px-to-rem(16px), 76 --150: iro.fn-px-to-rem(16px),
77 --200: iro.fn-px-to-rem(18px), 77 --200: iro.fn-px-to-rem(18px),
78 --300: iro.fn-px-to-rem(22px), 78 --300: iro.fn-px-to-rem(20px),
79 --400: iro.fn-px-to-rem(28px), 79 --400: iro.fn-px-to-rem(24px),
80 --500: iro.fn-px-to-rem(28px),
81 --600: iro.fn-px-to-rem(32px),
82 --700: iro.fn-px-to-rem(36px),
83 --800: iro.fn-px-to-rem(40px),
84 --900: iro.fn-px-to-rem(45px),
85 --1000: iro.fn-px-to-rem(50px),
86 --1100: iro.fn-px-to-rem(60px),
80 ), 87 ),
81 88
82 --border: ( 89 --border: (
diff --git a/src/_functions.scss b/src/_functions.scss
index 7b43d95..4a91629 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -109,6 +109,7 @@
109 --bg: $base, 109 --bg: $base,
110 --obj: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -7.5%), 110 --obj: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -7.5%),
111 --obj-lo: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%), 111 --obj-lo: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%),
112 --faint: rgba($base, .1),
112 --semi: rgba($base, .4), 113 --semi: rgba($base, .4),
113 --selection: rgba($base, .99), 114 --selection: rgba($base, .99),
114 --fg: blend.contrast($base), 115 --fg: blend.contrast($base),
diff --git a/src/_scopes.scss b/src/_scopes.scss
index 772d4e8..92e6d14 100644
--- a/src/_scopes.scss
+++ b/src/_scopes.scss
@@ -1 +1,3 @@
1@use 'scopes/colored-links'; 1@use 'scopes/colored-links';
2@use 'scopes/code';
3@use 'scopes/blockquote';
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index 9e54d50..176df06 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -1,5 +1,4 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media;
3@use '../functions' as fn; 2@use '../functions' as fn;
4 3
5@include iro.props-namespace('card') { 4@include iro.props-namespace('card') {
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 521262d..3e3fcac 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -1,5 +1,4 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media;
3@use '../functions' as fn; 2@use '../functions' as fn;
4 3
5@include iro.props-namespace('container') { 4@include iro.props-namespace('container') {
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 3b4656e..59efc26 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -4,10 +4,10 @@
4@include iro.props-namespace('alert') { 4@include iro.props-namespace('alert') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --border: 2px, 7 --border: 2px,
8 --pad-x: fn.global-dim(--size --250), 8 --pad-x: fn.global-dim(--size --250),
9 --pad-y: fn.global-dim(--size --250), 9 --pad-y: fn.global-dim(--size --200),
10 --rounding: 4px, 10 --rounding: 4px,
11 ), 11 ),
12 ), 'dims'); 12 ), 'dims');
13 13
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 3c14c99..77e24b4 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,14 +1,14 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3@use '../mixins' as mx; 3@use '../mixins' as mx;
4@use '../config';
4 5
5@include iro.props-namespace('heading') { 6@include iro.props-namespace('heading') {
6 @include iro.props-store(( 7 @include iro.props-store((
7 --dims: ( 8 --dims: (
8 --in-page-margin: ( 9 --spacing: (
9 --top: fn.global-dim(--size --500), 10 --top: fn.global-dim(--size --500),
10 --top-sibling: fn.global-dim(--size --325), 11 --top-sibling: fn.global-dim(--size --325),
11 --bottom: fn.global-dim(--size --150),
12 ), 12 ),
13 ), 13 ),
14 ), 'dims'); 14 ), 'dims');
@@ -17,48 +17,53 @@
17 --colors: ( 17 --colors: (
18 --light: fn.global-color(--fg-hi), 18 --light: fn.global-color(--fg-hi),
19 --strong: fn.global-color(--fg-lo), 19 --strong: fn.global-color(--fg-lo),
20 --bg: fn.global-color(--bg-hi),
20 ), 21 ),
21 ), 'colors'); 22 ), 'colors');
22 23
23 @include iro.bem-object(iro.props-namespace()) { 24 @include iro.bem-object(iro.props-namespace()) {
24 @include mx.set-font(--headline); 25 @include mx.set-font(--headline);
25 26
26 display: block; 27 display: block;
28 letter-spacing: normal;
29 text-transform: none;
27 30
28 @include iro.bem-at-theme('typography') { 31 @include iro.bem-at-theme('typography') {
29 margin-top: fn.dim(--in-page-margin --top); 32 margin-top: fn.dim(--spacing --top);
30 margin-bottom: 0; 33 margin-bottom: 0;
31 34
32 & + & { 35 & + & {
33 margin-top: fn.dim(--in-page-margin --top-sibling); 36 margin-top: fn.dim(--spacing --top-sibling);
34 } 37 }
35 } 38 }
36 39
37 @include iro.bem-modifier('xxl') { 40 @include iro.bem-modifier('xxl') {
38 color: fn.color(--strong); 41 color: fn.color(--strong);
39 font-size: fn.global-dim(--font-size --400); 42 font-size: fn.global-dim(--font-size --1000);
40 } 43 }
41 44
42 @include iro.bem-modifier('xl') { 45 @include iro.bem-modifier('xl') {
43 color: fn.color(--strong); 46 color: fn.color(--strong);
44 font-size: fn.global-dim(--font-size --300); 47 font-size: fn.global-dim(--font-size --700);
45 } 48 }
46 49
47 @include iro.bem-modifier('lg') { 50 @include iro.bem-modifier('lg') {
48 color: fn.color(--strong); 51 color: fn.color(--strong);
49 font-size: fn.global-dim(--font-size --200); 52 font-size: fn.global-dim(--font-size --400);
50 } 53 }
51 54
52 @include iro.bem-modifier('md') { 55 @include iro.bem-modifier('md') {
53 color: fn.color(--strong); 56 color: fn.color(--strong);
54 font-size: fn.global-dim(--font-size --150); 57 font-size: fn.global-dim(--font-size --200);
55 } 58 }
56 59
57 @include iro.bem-modifier('sm') { 60 @include iro.bem-modifier('sm') {
58 @include mx.set-font(--standard, ( 61 @include mx.set-font(--standard, (
59 --line-height: null, 62 --line-height: null,
60 --size: fn.global-dim(--font-size --100), 63 --size: fn.global-dim(--font-size --100),
61 --weight: 700 64 --weight: bold,
65 --transform: uppercase,
66 --spacing: 1px
62 )); 67 ));
63 68
64 color: fn.color(--strong); 69 color: fn.color(--strong);
@@ -70,10 +75,20 @@
70 --size: fn.global-dim(--font-size --50), 75 --size: fn.global-dim(--font-size --50),
71 --weight: 500, 76 --weight: 500,
72 --transform: uppercase, 77 --transform: uppercase,
73 --spacing: .5px 78 --spacing: 1px
74 )); 79 ));
75 80
76 color: fn.color(--light); 81 color: fn.color(--light);
77 } 82 }
83
84 @include iro.bem-elem('inner') {
85 background-image: linear-gradient(
86 to top,
87 transparent .15em,
88 fn.color(--bg) .15em,
89 fn.color(--bg) .6em,
90 transparent .6em
91 );
92 }
78 } 93 }
79} 94}
diff --git a/src/scopes/_blockquote.scss b/src/scopes/_blockquote.scss
new file mode 100644
index 0000000..e997b9b
--- /dev/null
+++ b/src/scopes/_blockquote.scss
@@ -0,0 +1,25 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('blockquote') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.global-dim(--size --250),
8 --margin-top: fn.global-dim(--paragraph --margin-top),
9 )
10 ), 'dims');
11
12 @include iro.props-store((
13 --colors: (
14 --border: fn.global-color(--obj-hi),
15 )
16 ), 'colors');
17
18 @include iro.bem-scope(iro.props-namespace()) {
19 blockquote {
20 margin: fn.dim(--margin-top) 0 0 1px;
21 padding-left: calc(fn.dim(--pad-x) - 3px);
22 border-left: 3px solid fn.color(--border);
23 }
24 }
25}
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
new file mode 100644
index 0000000..d4b70ee
--- /dev/null
+++ b/src/scopes/_code.scss
@@ -0,0 +1,59 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('body') {
5 @include iro.props-store((
6 --dims: (
7 --inline: (
8 --pad-x: fn.global-dim(--size --50),
9 --pad-y: fn.global-dim(--size --10),
10 --rounding: 3px,
11 ),
12 --block: (
13 --pad-x: fn.global-dim(--size --150),
14 --pad-y: fn.global-dim(--size --85),
15 --margin-top: fn.global-dim(--paragraph --margin-top),
16 --rounding: 3px,
17 )
18 )
19 ), 'dims');
20
21 @include iro.props-store((
22 --colors: (
23 --inline: (
24 --fg: fn.global-color(--accent --primary --obj-lo),
25 --bg: fn.global-color(--accent --primary --faint),
26 ),
27 --block: (
28 --fg: fn.global-color(--fg),
29 --bg: fn.global-color(--bg-hi),
30 )
31 )
32 ), 'colors');
33
34 @include iro.bem-scope(iro.props-namespace()) {
35 code {
36 padding: fn.dim(--inline --pad-y) fn.dim(--inline --pad-x);
37 border-radius: fn.dim(--inline --rounding);
38 background-color: fn.color(--inline --bg);
39 color: fn.color(--inline --fg);
40 }
41
42 pre {
43 margin: fn.dim(--block --margin-top) 0 0 0;
44 padding: fn.dim(--block --pad-y) fn.dim(--block --pad-x);
45 border-radius: fn.dim(--block --rounding);
46 background-color: fn.color(--block --bg);
47 color: fn.color(--block --fg);
48
49 code {
50 display: inline-block;
51 margin-right: fn.dim(--block --pad-x);
52 padding: 0;
53 border-radius: 0;
54 background-color: transparent;
55 color: currentColor;
56 }
57 }
58 }
59}
diff --git a/src_demo/_base.scss b/src_demo/_base.scss
index 8dcd789..129b319 100644
--- a/src_demo/_base.scss
+++ b/src_demo/_base.scss
@@ -3,3 +3,11 @@ body {
3 grid-template-columns: auto 1fr; 3 grid-template-columns: auto 1fr;
4 grid-template-areas: 'sidebar content'; 4 grid-template-areas: 'sidebar content';
5} 5}
6
7@font-face {
8 font-family: 'Garet';
9 font-style: normal;
10 font-weight: 50 950;
11 font-display: swap;
12 src: url('/garet.woff2') format('woff2-variations');
13}
diff --git a/tpl/index.pug b/tpl/index.pug
index 6565589..7c3696e 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -52,6 +52,8 @@ mixin user-card(name, hue)
52include views/heading.pug 52include views/heading.pug
53include views/divider.pug 53include views/divider.pug
54include views/colored-links.pug 54include views/colored-links.pug
55include views/code.pug
56include views/blockquote.pug
55include views/badge.pug 57include views/badge.pug
56include views/button.pug 58include views/button.pug
57include views/text-field.pug 59include views/text-field.pug
@@ -90,6 +92,8 @@ html
90 +view-heading 92 +view-heading
91 +view-divider 93 +view-divider
92 +view-colored-links 94 +view-colored-links
95 +view-code
96 +view-blockquote
93 +view-badge 97 +view-badge
94 +view-button 98 +view-button
95 +view-text-field 99 +view-text-field
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug
index a0de4af..aa3fec9 100644
--- a/tpl/objects/heading.pug
+++ b/tpl/objects/heading.pug
@@ -1,7 +1,11 @@
1mixin h1-heading(level) 1mixin h1-heading(level, inner = false)
2 - let classes = ['o-heading', 'o-heading--' + level] 2 - let classes = ['o-heading', 'o-heading--' + level]
3 h1(class=classes)&attributes(attributes) 3 h1(class=classes)&attributes(attributes)
4 block 4 if inner
5 span.o-heading__inner
6 block
7 else
8 block
5 9
6mixin h2-heading(level) 10mixin h2-heading(level)
7 - let classes = ['o-heading', 'o-heading--' + level] 11 - let classes = ['o-heading', 'o-heading--' + level]
@@ -28,7 +32,11 @@ mixin h6-heading(level)
28 h6(class=classes)&attributes(attributes) 32 h6(class=classes)&attributes(attributes)
29 block 33 block
30 34
31mixin div-heading(level) 35mixin div-heading(level, inner = false)
32 - let classes = ['o-heading', 'o-heading--' + level] 36 - let classes = ['o-heading', 'o-heading--' + level]
33 div(class=classes)&attributes(attributes) 37 div(class=classes)&attributes(attributes)
34 block 38 if inner
39 span.o-heading__inner
40 block
41 else
42 block
diff --git a/tpl/views/blockquote.pug b/tpl/views/blockquote.pug
new file mode 100644
index 0000000..a346292
--- /dev/null
+++ b/tpl/views/blockquote.pug
@@ -0,0 +1,6 @@
1mixin view-blockquote
2 +view('blockquote', 'Blockquote')
3 .c-box.s-blockquote
4 p= loremIpsum
5 blockquote= loremIpsum
6 p= loremIpsum
diff --git a/tpl/views/code.pug b/tpl/views/code.pug
new file mode 100644
index 0000000..552500d
--- /dev/null
+++ b/tpl/views/code.pug
@@ -0,0 +1,13 @@
1mixin view-code
2 +view('code', 'Code')
3 .c-box.s-body
4 p= loremIpsum
5 pre
6 code.
7 font-weight: 700;
8 letter-spacing: 1px;
9 text-transform: uppercase;
10 p= loremIpsum
11
12 .c-box.s-body.
13 And here is an #[code inline] code tag.
diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug
index a49c93d..efdfb69 100644
--- a/tpl/views/heading.pug
+++ b/tpl/views/heading.pug
@@ -1,7 +1,15 @@
1mixin view-heading 1mixin view-heading
2 +view('heading', 'Heading') 2 +view('heading', 'Heading')
3 .c-box 3 .c-box
4 +div-heading('xxl')= 'XXL Heading' 4 h1= 'H1 default'
5 h2= 'H2 default'
6 h3= 'H3 default'
7 h4= 'H4 default'
8 h5= 'H5 default'
9 h6= 'H6 default'
10
11 .c-box
12 +div-heading('xxl', true)= 'XXL Heading'
5 +div-heading('xl')= 'XL Heading' 13 +div-heading('xl')= 'XL Heading'
6 +div-heading('lg')= 'LG Heading' 14 +div-heading('lg')= 'LG Heading'
7 +div-heading('md')= 'MD Heading' 15 +div-heading('md')= 'MD Heading'
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-24 10:07:10 +0000