@carbon/styles 0.10.0-rc.0 → 0.12.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/docs/sass.md +0 -17
  2. package/index.scss +3 -1
  3. package/package.json +10 -10
  4. package/scss/_config.scss +18 -11
  5. package/scss/_layer.scss +112 -0
  6. package/scss/_theme.scss +0 -69
  7. package/scss/_zone.scss +2 -0
  8. package/scss/components/button/_tokens.scss +2 -2
  9. package/scss/components/date-picker/_date-picker.scss +1 -1
  10. package/scss/components/list-box/_list-box.scss +2 -2
  11. package/scss/components/radio-button/_radio-button.scss +3 -3
  12. package/scss/components/tabs/_tabs.scss +86 -103
  13. package/scss/components/tag/_tokens.scss +60 -60
  14. package/scss/fonts/README.md +148 -0
  15. package/scss/fonts/_index.scss +75 -0
  16. package/scss/fonts/_mono.scss +153 -0
  17. package/scss/fonts/_sans-arabic.scss +151 -0
  18. package/scss/fonts/_sans-devanagari.scss +151 -0
  19. package/scss/fonts/_sans-hebrew.scss +151 -0
  20. package/scss/fonts/_sans-thai-looped.scss +151 -0
  21. package/scss/fonts/_sans-thai.scss +151 -0
  22. package/scss/fonts/_sans.scss +153 -0
  23. package/scss/fonts/_serif.scss +153 -0
  24. package/scss/fonts/_src.scss +102 -0
  25. package/scss/fonts/unicode/_index.scss +124 -0
  26. package/scss/_font-face.scss +0 -13
  27. package/scss/utilities/_layer-set.scss +0 -38
package/scss/fonts/_mono.scss ADDED
@@ -0,0 +1,153 @@
1
+ //
2
+ // Copyright IBM Corp. 2018, 2018
3
+ //
4
+ // This source code is licensed under the Apache-2.0 license found in the
5
+ // LICENSE file in the root directory of this source tree.
6
+ //
7
+
8
+ @use '../config';
9
+ @use './src';
10
+ @use './unicode';
11
+
12
+ $font-family: 'IBM Plex Mono';
13
+ $name: 'IBM-Plex-Mono';
14
+ $styles: (normal, italic);
15
+ $unicode-ranges: (Cyrillic, Pi, Latin3, Latin2, Latin1);
16
+ $formats: (woff2, woff);
17
+
18
+ @mixin thin($styles: $styles, $unicode-ranges: $unicode-ranges) {
19
+ @each $style in $styles {
20
+ @each $unicode-range in $unicode-ranges {
21
+ @font-face {
22
+ font-display: config.$font-display;
23
+ font-family: $font-family;
24
+ font-style: $style;
25
+ font-weight: 100;
26
+ src: src.get($name, Thin, $style, $unicode-range, $formats);
27
+ unicode-range: unicode.get-range($unicode-range);
28
+ }
29
+ }
30
+ }
31
+ }
32
+
33
+ @mixin extralight($styles: $styles, $unicode-ranges: $unicode-ranges) {
34
+ @each $style in $styles {
35
+ @each $unicode-range in $unicode-ranges {
36
+ @font-face {
37
+ font-display: config.$font-display;
38
+ font-family: $font-family;
39
+ font-style: $style;
40
+ font-weight: 200;
41
+ src: src.get($name, ExtraLight, $style, $unicode-range, $formats);
42
+ unicode-range: unicode.get-range($unicode-range);
43
+ }
44
+ }
45
+ }
46
+ }
47
+
48
+ @mixin light($styles: $styles, $unicode-ranges: $unicode-ranges) {
49
+ @each $style in $styles {
50
+ @each $unicode-range in $unicode-ranges {
51
+ @font-face {
52
+ font-display: config.$font-display;
53
+ font-family: $font-family;
54
+ font-style: $style;
55
+ font-weight: 300;
56
+ src: src.get($name, Light, $style, $unicode-range, $formats);
57
+ unicode-range: unicode.get-range($unicode-range);
58
+ }
59
+ }
60
+ }
61
+ }
62
+
63
+ @mixin regular($styles: $styles, $unicode-ranges: $unicode-ranges) {
64
+ @each $style in $styles {
65
+ @each $unicode-range in $unicode-ranges {
66
+ @font-face {
67
+ font-display: config.$font-display;
68
+ font-family: $font-family;
69
+ font-style: $style;
70
+ font-weight: 400;
71
+ src: src.get($name, Regular, $style, $unicode-range, $formats);
72
+ unicode-range: unicode.get-range($unicode-range);
73
+ }
74
+ }
75
+ }
76
+ }
77
+
78
+ @mixin text($styles: $styles, $unicode-ranges: $unicode-ranges) {
79
+ @each $style in $styles {
80
+ @each $unicode-range in $unicode-ranges {
81
+ @font-face {
82
+ font-display: config.$font-display;
83
+ font-family: $font-family;
84
+ font-style: $style;
85
+ font-weight: 450;
86
+ src: src.get($name, Text, $style, $unicode-range, $formats);
87
+ unicode-range: unicode.get-range($unicode-range);
88
+ }
89
+ }
90
+ }
91
+ }
92
+
93
+ @mixin medium($styles: $styles, $unicode-ranges: $unicode-ranges) {
94
+ @each $style in $styles {
95
+ @each $unicode-range in $unicode-ranges {
96
+ @font-face {
97
+ font-display: config.$font-display;
98
+ font-family: $font-family;
99
+ font-style: $style;
100
+ font-weight: 500;
101
+ src: src.get($name, Medium, $style, $unicode-range, $formats);
102
+ unicode-range: unicode.get-range($unicode-range);
103
+ }
104
+ }
105
+ }
106
+ }
107
+
108
+ @mixin semibold($styles: $styles, $unicode-ranges: $unicode-ranges) {
109
+ @each $style in $styles {
110
+ @each $unicode-range in $unicode-ranges {
111
+ @font-face {
112
+ font-display: config.$font-display;
113
+ font-family: $font-family;
114
+ font-style: $style;
115
+ font-weight: 600;
116
+ src: src.get($name, SemiBold, $style, $unicode-range, $formats);
117
+ unicode-range: unicode.get-range($unicode-range);
118
+ }
119
+ }
120
+ }
121
+ }
122
+
123
+ @mixin bold($styles: $styles, $unicode-ranges: $unicode-ranges) {
124
+ @each $style in $styles {
125
+ @each $unicode-range in $unicode-ranges {
126
+ @font-face {
127
+ font-display: config.$font-display;
128
+ font-family: $font-family;
129
+ font-style: $style;
130
+ font-weight: 700;
131
+ src: src.get($name, Bold, $style, $unicode-range, $formats);
132
+ unicode-range: unicode.get-range($unicode-range);
133
+ }
134
+ }
135
+ }
136
+ }
137
+
138
+ @mixin all($styles: $styles, $unicode-ranges: $unicode-ranges) {
139
+ @include thin($styles, $unicode-ranges);
140
+ @include extralight($styles, $unicode-ranges);
141
+ @include light($styles, $unicode-ranges);
142
+ @include regular($styles, $unicode-ranges);
143
+ @include text($styles, $unicode-ranges);
144
+ @include medium($styles, $unicode-ranges);
145
+ @include semibold($styles, $unicode-ranges);
146
+ @include bold($styles, $unicode-ranges);
147
+ }
148
+
149
+ @mixin default() {
150
+ @include light();
151
+ @include regular();
152
+ @include semibold();
153
+ }
package/scss/fonts/_sans-arabic.scss ADDED
@@ -0,0 +1,151 @@
1
+ //
2
+ // Copyright IBM Corp. 2018, 2018
3
+ //
4
+ // This source code is licensed under the Apache-2.0 license found in the
5
+ // LICENSE file in the root directory of this source tree.
6
+ //
7
+
8
+ @use '../config';
9
+ @use './src';
10
+
11
+ $font-family: 'IBM Plex Sans Arabic';
12
+ $name: 'IBM-Plex-Sans-Arabic';
13
+ $styles: (normal);
14
+ $formats: (woff2, woff);
15
+
16
+ @mixin thin() {
17
+ @font-face {
18
+ font-display: config.$font-display;
19
+ font-family: $font-family;
20
+ font-style: normal;
21
+ font-weight: 100;
22
+ src: src.get(
23
+ $name: $name,
24
+ $weight: Thin,
25
+ $style: $styles,
26
+ $formats: $formats
27
+ );
28
+ }
29
+ }
30
+
31
+ @mixin extralight() {
32
+ @font-face {
33
+ font-display: config.$font-display;
34
+ font-family: $font-family;
35
+ font-style: normal;
36
+ font-weight: 200;
37
+ src: src.get(
38
+ $name: $name,
39
+ $weight: ExtraLight,
40
+ $style: $styles,
41
+ $formats: $formats
42
+ );
43
+ }
44
+ }
45
+
46
+ @mixin light() {
47
+ @font-face {
48
+ font-display: config.$font-display;
49
+ font-family: $font-family;
50
+ font-style: normal;
51
+ font-weight: 300;
52
+ src: src.get(
53
+ $name: $name,
54
+ $weight: Light,
55
+ $style: $styles,
56
+ $formats: $formats
57
+ );
58
+ }
59
+ }
60
+
61
+ @mixin regular() {
62
+ @font-face {
63
+ font-display: config.$font-display;
64
+ font-family: $font-family;
65
+ font-style: normal;
66
+ font-weight: 400;
67
+ src: src.get(
68
+ $name: $name,
69
+ $weight: Regular,
70
+ $style: $styles,
71
+ $formats: $formats
72
+ );
73
+ }
74
+ }
75
+
76
+ @mixin text() {
77
+ @font-face {
78
+ font-display: config.$font-display;
79
+ font-family: $font-family;
80
+ font-style: normal;
81
+ font-weight: 450;
82
+ src: src.get(
83
+ $name: $name,
84
+ $weight: Text,
85
+ $style: $styles,
86
+ $formats: $formats
87
+ );
88
+ }
89
+ }
90
+
91
+ @mixin medium() {
92
+ @font-face {
93
+ font-display: config.$font-display;
94
+ font-family: $font-family;
95
+ font-style: normal;
96
+ font-weight: 500;
97
+ src: src.get(
98
+ $name: $name,
99
+ $weight: Medium,
100
+ $style: $styles,
101
+ $formats: $formats
102
+ );
103
+ }
104
+ }
105
+
106
+ @mixin semibold() {
107
+ @font-face {
108
+ font-display: config.$font-display;
109
+ font-family: $font-family;
110
+ font-style: normal;
111
+ font-weight: 500;
112
+ src: src.get(
113
+ $name: $name,
114
+ $weight: SemiBold,
115
+ $style: $styles,
116
+ $formats: $formats
117
+ );
118
+ }
119
+ }
120
+
121
+ @mixin bold() {
122
+ @font-face {
123
+ font-display: config.$font-display;
124
+ font-family: $font-family;
125
+ font-style: normal;
126
+ font-weight: 500;
127
+ src: src.get(
128
+ $name: $name,
129
+ $weight: Bold,
130
+ $style: $styles,
131
+ $formats: $formats
132
+ );
133
+ }
134
+ }
135
+
136
+ @mixin all() {
137
+ @include thin();
138
+ @include extralight();
139
+ @include light();
140
+ @include regular();
141
+ @include text();
142
+ @include medium();
143
+ @include semibold();
144
+ @include bold();
145
+ }
146
+
147
+ @mixin default() {
148
+ @include light();
149
+ @include regular();
150
+ @include semibold();
151
+ }
package/scss/fonts/_sans-devanagari.scss ADDED
@@ -0,0 +1,151 @@
1
+ //
2
+ // Copyright IBM Corp. 2018, 2018
3
+ //
4
+ // This source code is licensed under the Apache-2.0 license found in the
5
+ // LICENSE file in the root directory of this source tree.
6
+ //
7
+
8
+ @use '../config';
9
+ @use './src';
10
+
11
+ $font-family: 'IBM Plex Sans Devanagari';
12
+ $name: 'IBM-Plex-Sans-Devanagari';
13
+ $styles: (normal);
14
+ $formats: (woff2, woff);
15
+
16
+ @mixin thin() {
17
+ @font-face {
18
+ font-display: config.$font-display;
19
+ font-family: $font-family;
20
+ font-style: normal;
21
+ font-weight: 100;
22
+ src: src.get(
23
+ $name: $name,
24
+ $weight: Thin,
25
+ $style: $styles,
26
+ $formats: $formats
27
+ );
28
+ }
29
+ }
30
+
31
+ @mixin extralight() {
32
+ @font-face {
33
+ font-display: config.$font-display;
34
+ font-family: $font-family;
35
+ font-style: normal;
36
+ font-weight: 200;
37
+ src: src.get(
38
+ $name: $name,
39
+ $weight: ExtraLight,
40
+ $style: $styles,
41
+ $formats: $formats
42
+ );
43
+ }
44
+ }
45
+
46
+ @mixin light() {
47
+ @font-face {
48
+ font-display: config.$font-display;
49
+ font-family: $font-family;
50
+ font-style: normal;
51
+ font-weight: 300;
52
+ src: src.get(
53
+ $name: $name,
54
+ $weight: Light,
55
+ $style: $styles,
56
+ $formats: $formats
57
+ );
58
+ }
59
+ }
60
+
61
+ @mixin regular() {
62
+ @font-face {
63
+ font-display: config.$font-display;
64
+ font-family: $font-family;
65
+ font-style: normal;
66
+ font-weight: 400;
67
+ src: src.get(
68
+ $name: $name,
69
+ $weight: Regular,
70
+ $style: $styles,
71
+ $formats: $formats
72
+ );
73
+ }
74
+ }
75
+
76
+ @mixin text() {
77
+ @font-face {
78
+ font-display: config.$font-display;
79
+ font-family: $font-family;
80
+ font-style: normal;
81
+ font-weight: 450;
82
+ src: src.get(
83
+ $name: $name,
84
+ $weight: Text,
85
+ $style: $styles,
86
+ $formats: $formats
87
+ );
88
+ }
89
+ }
90
+
91
+ @mixin medium() {
92
+ @font-face {
93
+ font-display: config.$font-display;
94
+ font-family: $font-family;
95
+ font-style: normal;
96
+ font-weight: 500;
97
+ src: src.get(
98
+ $name: $name,
99
+ $weight: Medium,
100
+ $style: $styles,
101
+ $formats: $formats
102
+ );
103
+ }
104
+ }
105
+
106
+ @mixin semibold() {
107
+ @font-face {
108
+ font-display: config.$font-display;
109
+ font-family: $font-family;
110
+ font-style: normal;
111
+ font-weight: 500;
112
+ src: src.get(
113
+ $name: $name,
114
+ $weight: SemiBold,
115
+ $style: $styles,
116
+ $formats: $formats
117
+ );
118
+ }
119
+ }
120
+
121
+ @mixin bold() {
122
+ @font-face {
123
+ font-display: config.$font-display;
124
+ font-family: $font-family;
125
+ font-style: normal;
126
+ font-weight: 500;
127
+ src: src.get(
128
+ $name: $name,
129
+ $weight: Bold,
130
+ $style: $styles,
131
+ $formats: $formats
132
+ );
133
+ }
134
+ }
135
+
136
+ @mixin all() {
137
+ @include thin();
138
+ @include extralight();
139
+ @include light();
140
+ @include regular();
141
+ @include text();
142
+ @include medium();
143
+ @include semibold();
144
+ @include bold();
145
+ }
146
+
147
+ @mixin default() {
148
+ @include light();
149
+ @include regular();
150
+ @include semibold();
151
+ }
package/scss/fonts/_sans-hebrew.scss ADDED
@@ -0,0 +1,151 @@
1
+ //
2
+ // Copyright IBM Corp. 2018, 2018
3
+ //
4
+ // This source code is licensed under the Apache-2.0 license found in the
5
+ // LICENSE file in the root directory of this source tree.
6
+ //
7
+
8
+ @use '../config';
9
+ @use './src';
10
+
11
+ $font-family: 'IBM Plex Sans Hebrew';
12
+ $name: 'IBM-Plex-Sans-Hebrew';
13
+ $styles: (normal);
14
+ $formats: (woff2, woff);
15
+
16
+ @mixin thin() {
17
+ @font-face {
18
+ font-display: config.$font-display;
19
+ font-family: $font-family;
20
+ font-style: normal;
21
+ font-weight: 100;
22
+ src: src.get(
23
+ $name: $name,
24
+ $weight: Thin,
25
+ $style: $styles,
26
+ $formats: $formats
27
+ );
28
+ }
29
+ }
30
+
31
+ @mixin extralight() {
32
+ @font-face {
33
+ font-display: config.$font-display;
34
+ font-family: $font-family;
35
+ font-style: normal;
36
+ font-weight: 200;
37
+ src: src.get(
38
+ $name: $name,
39
+ $weight: ExtraLight,
40
+ $style: $styles,
41
+ $formats: $formats
42
+ );
43
+ }
44
+ }
45
+
46
+ @mixin light() {
47
+ @font-face {
48
+ font-display: config.$font-display;
49
+ font-family: $font-family;
50
+ font-style: normal;
51
+ font-weight: 300;
52
+ src: src.get(
53
+ $name: $name,
54
+ $weight: Light,
55
+ $style: $styles,
56
+ $formats: $formats
57
+ );
58
+ }
59
+ }
60
+
61
+ @mixin regular() {
62
+ @font-face {
63
+ font-display: config.$font-display;
64
+ font-family: $font-family;
65
+ font-style: normal;
66
+ font-weight: 400;
67
+ src: src.get(
68
+ $name: $name,
69
+ $weight: Regular,
70
+ $style: $styles,
71
+ $formats: $formats
72
+ );
73
+ }
74
+ }
75
+
76
+ @mixin text() {
77
+ @font-face {
78
+ font-display: config.$font-display;
79
+ font-family: $font-family;
80
+ font-style: normal;
81
+ font-weight: 450;
82
+ src: src.get(
83
+ $name: $name,
84
+ $weight: Text,
85
+ $style: $styles,
86
+ $formats: $formats
87
+ );
88
+ }
89
+ }
90
+
91
+ @mixin medium() {
92
+ @font-face {
93
+ font-display: config.$font-display;
94
+ font-family: $font-family;
95
+ font-style: normal;
96
+ font-weight: 500;
97
+ src: src.get(
98
+ $name: $name,
99
+ $weight: Medium,
100
+ $style: $styles,
101
+ $formats: $formats
102
+ );
103
+ }
104
+ }
105
+
106
+ @mixin semibold() {
107
+ @font-face {
108
+ font-display: config.$font-display;
109
+ font-family: $font-family;
110
+ font-style: normal;
111
+ font-weight: 500;
112
+ src: src.get(
113
+ $name: $name,
114
+ $weight: SemiBold,
115
+ $style: $styles,
116
+ $formats: $formats
117
+ );
118
+ }
119
+ }
120
+
121
+ @mixin bold() {
122
+ @font-face {
123
+ font-display: config.$font-display;
124
+ font-family: $font-family;
125
+ font-style: normal;
126
+ font-weight: 500;
127
+ src: src.get(
128
+ $name: $name,
129
+ $weight: Bold,
130
+ $style: $styles,
131
+ $formats: $formats
132
+ );
133
+ }
134
+ }
135
+
136
+ @mixin all() {
137
+ @include thin();
138
+ @include extralight();
139
+ @include light();
140
+ @include regular();
141
+ @include text();
142
+ @include medium();
143
+ @include semibold();
144
+ @include bold();
145
+ }
146
+
147
+ @mixin default() {
148
+ @include light();
149
+ @include regular();
150
+ @include semibold();
151
+ }