Skip to content

Commit 6f57947

Browse files
adamdehavenadamdehaven
authored
feat(*): add tokens (#88)
* feat(shadow): add tokens * feat: letter spacing
1 parent dfac8da commit 6f57947

File tree

3 files changed

+146
-1
lines changed

3 files changed

+146
-1
lines changed

‎TOKENS.md

+100-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!--
22
* Do not edit directly
3-
* Generated on Mon, 14 Aug 2023 15:16:41 GMT
3+
* Generated on Thu, 07 Sep 2023 16:25:47 GMT
44
*
55
* Kong Design Tokens
66
* GitHub: https://github.com/Kong/design-tokens
@@ -232,6 +232,20 @@ $kui-font-weight-medium: 500;
232232
$kui-font-weight-regular: 400;
233233
/* 600 */
234234
$kui-font-weight-semibold: 600;
235+
/* Alias for letter-spacing-normal */
236+
$kui-letter-spacing-0: normal;
237+
/* -0.12px */
238+
$kui-letter-spacing-minus-10: -0.12px;
239+
/* -0.24px */
240+
$kui-letter-spacing-minus-20: -0.24px;
241+
/* -0.32px */
242+
$kui-letter-spacing-minus-30: -0.32px;
243+
/* -0.4px */
244+
$kui-letter-spacing-minus-40: -0.4px;
245+
/* -0.48px */
246+
$kui-letter-spacing-minus-50: -0.48px;
247+
/* normal */
248+
$kui-letter-spacing-normal: normal;
235249
/* 12px */
236250
$kui-line-height-10: 12px;
237251
/* 16px */
@@ -252,6 +266,10 @@ $kui-line-height-80: 40px;
252266
$kui-line-height-90: 48px;
253267
/* 56px */
254268
$kui-line-height-100: 56px;
269+
/* 0px 4px 20px 0px rgba(0, 0, 0, 0.08) */
270+
$kui-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
271+
/* 0px 0px 0px 4px rgba(0, 68, 244, 0.2) */
272+
$kui-shadow-focus: 0px 0px 0px 4px rgba(0, 68, 244, 0.2);
255273
/* 0px */
256274
$kui-space-0: 0px;
257275
/* 2px */
@@ -510,6 +528,20 @@ $tokens-map: (
510528
'kui-font-weight-regular': 400;
511529
/* 600 */
512530
'kui-font-weight-semibold': 600;
531+
/* Alias for letter-spacing-normal */
532+
'kui-letter-spacing-0': normal;
533+
/* -0.12px */
534+
'kui-letter-spacing-minus-10': -0.12px;
535+
/* -0.24px */
536+
'kui-letter-spacing-minus-20': -0.24px;
537+
/* -0.32px */
538+
'kui-letter-spacing-minus-30': -0.32px;
539+
/* -0.4px */
540+
'kui-letter-spacing-minus-40': -0.4px;
541+
/* -0.48px */
542+
'kui-letter-spacing-minus-50': -0.48px;
543+
/* normal */
544+
'kui-letter-spacing-normal': normal;
513545
/* 12px */
514546
'kui-line-height-10': 12px;
515547
/* 16px */
@@ -530,6 +562,10 @@ $tokens-map: (
530562
'kui-line-height-90': 48px;
531563
/* 56px */
532564
'kui-line-height-100': 56px;
565+
/* 0px 4px 20px 0px rgba(0, 0, 0, 0.08) */
566+
'kui-shadow': 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
567+
/* 0px 0px 0px 4px rgba(0, 68, 244, 0.2) */
568+
'kui-shadow-focus': 0px 0px 0px 4px rgba(0, 68, 244, 0.2);
533569
/* 0px */
534570
'kui-space-0': 0px;
535571
/* 2px */
@@ -790,6 +826,20 @@ $tokens-map: (
790826
@kui-font-weight-regular: 400;
791827
/* 600 */
792828
@kui-font-weight-semibold: 600;
829+
/* Alias for letter-spacing-normal */
830+
@kui-letter-spacing-0: normal;
831+
/* -0.12px */
832+
@kui-letter-spacing-minus-10: -0.12px;
833+
/* -0.24px */
834+
@kui-letter-spacing-minus-20: -0.24px;
835+
/* -0.32px */
836+
@kui-letter-spacing-minus-30: -0.32px;
837+
/* -0.4px */
838+
@kui-letter-spacing-minus-40: -0.4px;
839+
/* -0.48px */
840+
@kui-letter-spacing-minus-50: -0.48px;
841+
/* normal */
842+
@kui-letter-spacing-normal: normal;
793843
/* 12px */
794844
@kui-line-height-10: 12px;
795845
/* 16px */
@@ -810,6 +860,10 @@ $tokens-map: (
810860
@kui-line-height-90: 48px;
811861
/* 56px */
812862
@kui-line-height-100: 56px;
863+
/* 0px 4px 20px 0px rgba(0, 0, 0, 0.08) */
864+
@kui-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
865+
/* 0px 0px 0px 4px rgba(0, 68, 244, 0.2) */
866+
@kui-shadow-focus: 0px 0px 0px 4px rgba(0, 68, 244, 0.2);
813867
/* 0px */
814868
@kui-space-0: 0px;
815869
/* 2px */
@@ -1071,6 +1125,20 @@ You may scope your CSS custom property overrides inside the `:root` selector as
10711125
--kui-font-weight-regular: 400;
10721126
/* 600 */
10731127
--kui-font-weight-semibold: 600;
1128+
/* Alias for letter-spacing-normal */
1129+
--kui-letter-spacing-0: normal;
1130+
/* -0.12px */
1131+
--kui-letter-spacing-minus-10: -0.12px;
1132+
/* -0.24px */
1133+
--kui-letter-spacing-minus-20: -0.24px;
1134+
/* -0.32px */
1135+
--kui-letter-spacing-minus-30: -0.32px;
1136+
/* -0.4px */
1137+
--kui-letter-spacing-minus-40: -0.4px;
1138+
/* -0.48px */
1139+
--kui-letter-spacing-minus-50: -0.48px;
1140+
/* normal */
1141+
--kui-letter-spacing-normal: normal;
10741142
/* 12px */
10751143
--kui-line-height-10: 12px;
10761144
/* 16px */
@@ -1091,6 +1159,10 @@ You may scope your CSS custom property overrides inside the `:root` selector as
10911159
--kui-line-height-90: 48px;
10921160
/* 56px */
10931161
--kui-line-height-100: 56px;
1162+
/* 0px 4px 20px 0px rgba(0, 0, 0, 0.08) */
1163+
--kui-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
1164+
/* 0px 0px 0px 4px rgba(0, 68, 244, 0.2) */
1165+
--kui-shadow-focus: 0px 0px 0px 4px rgba(0, 68, 244, 0.2);
10941166
/* 0px */
10951167
--kui-space-0: 0px;
10961168
/* 2px */
@@ -1350,6 +1422,20 @@ export const KUI_FONT_WEIGHT_MEDIUM = "500";
13501422
export const KUI_FONT_WEIGHT_REGULAR = "400";
13511423
/* 600 */
13521424
export const KUI_FONT_WEIGHT_SEMIBOLD = "600";
1425+
/* Alias for letter-spacing-normal */
1426+
export const KUI_LETTER_SPACING_0 = "normal";
1427+
/* -0.12px */
1428+
export const KUI_LETTER_SPACING_MINUS_10 = "-0.12px";
1429+
/* -0.24px */
1430+
export const KUI_LETTER_SPACING_MINUS_20 = "-0.24px";
1431+
/* -0.32px */
1432+
export const KUI_LETTER_SPACING_MINUS_30 = "-0.32px";
1433+
/* -0.4px */
1434+
export const KUI_LETTER_SPACING_MINUS_40 = "-0.4px";
1435+
/* -0.48px */
1436+
export const KUI_LETTER_SPACING_MINUS_50 = "-0.48px";
1437+
/* normal */
1438+
export const KUI_LETTER_SPACING_NORMAL = "normal";
13531439
/* 12px */
13541440
export const KUI_LINE_HEIGHT_10 = "12px";
13551441
/* 16px */
@@ -1370,6 +1456,10 @@ export const KUI_LINE_HEIGHT_80 = "40px";
13701456
export const KUI_LINE_HEIGHT_90 = "48px";
13711457
/* 56px */
13721458
export const KUI_LINE_HEIGHT_100 = "56px";
1459+
/* 0px 4px 20px 0px rgba(0, 0, 0, 0.08) */
1460+
export const KUI_SHADOW = "0px 4px 20px 0px rgba(0, 0, 0, 0.08)";
1461+
/* 0px 0px 0px 4px rgba(0, 68, 244, 0.2) */
1462+
export const KUI_SHADOW_FOCUS = "0px 0px 0px 4px rgba(0, 68, 244, 0.2)";
13731463
/* 0px */
13741464
export const KUI_SPACE_0 = "0px";
13751465
/* 2px */
@@ -1535,6 +1625,13 @@ export const KUI_SPACE_AUTO = "auto";
15351625
"kui_font_weight_medium": "500",
15361626
"kui_font_weight_regular": "400",
15371627
"kui_font_weight_semibold": "600",
1628+
"kui_letter_spacing_0": "normal",
1629+
"kui_letter_spacing_minus_10": "-0.12px",
1630+
"kui_letter_spacing_minus_20": "-0.24px",
1631+
"kui_letter_spacing_minus_30": "-0.32px",
1632+
"kui_letter_spacing_minus_40": "-0.4px",
1633+
"kui_letter_spacing_minus_50": "-0.48px",
1634+
"kui_letter_spacing_normal": "normal",
15381635
"kui_line_height_10": "12px",
15391636
"kui_line_height_20": "16px",
15401637
"kui_line_height_30": "20px",
@@ -1545,6 +1642,8 @@ export const KUI_SPACE_AUTO = "auto";
15451642
"kui_line_height_80": "40px",
15461643
"kui_line_height_90": "48px",
15471644
"kui_line_height_100": "56px",
1645+
"kui_shadow": "0px 4px 20px 0px rgba(0, 0, 0, 0.08)",
1646+
"kui_shadow_focus": "0px 0px 0px 4px rgba(0, 68, 244, 0.2)",
15481647
"kui_space_0": "0px",
15491648
"kui_space_10": "2px",
15501649
"kui_space_20": "4px",

‎tokens/source/letter-spacing/index.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"letter_spacing": {
3+
"0": {
4+
"comment": "Alias for letter-spacing-normal",
5+
"value": "{letter_spacing.normal}"
6+
},
7+
"minus": {
8+
"10": {
9+
"comment": "-0.12px",
10+
"value": "-0.12px"
11+
},
12+
"20": {
13+
"comment": "-0.24px",
14+
"value": "-0.24px"
15+
},
16+
"30": {
17+
"comment": "-0.32px",
18+
"value": "-0.32px"
19+
},
20+
"40": {
21+
"comment": "-0.4px",
22+
"value": "-0.4px"
23+
},
24+
"50": {
25+
"comment": "-0.48px",
26+
"value": "-0.48px"
27+
}
28+
},
29+
"normal": {
30+
"comment": "normal",
31+
"value": "normal"
32+
}
33+
}
34+
}

‎tokens/source/shadow/index.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"shadow": {
3+
"_": {
4+
"comment": "0px 4px 20px 0px rgba(0, 0, 0, 0.08)",
5+
"value": "0px 4px 20px 0px rgba(0, 0, 0, 0.08)"
6+
},
7+
"focus": {
8+
"comment": "0px 0px 0px 4px rgba(0, 68, 244, 0.2)",
9+
"value": "0px 0px 0px 4px rgba(0, 68, 244, 0.2)"
10+
}
11+
}
12+
}

0 commit comments

Comments
 (0)