Skip to content

Commit 6460417

Browse files
perkiperki
committed
deploy 3964a8c (3964a8c)
1 parent 0ff1d40 commit 6460417

8 files changed

Lines changed: 259 additions & 12 deletions

File tree

‎hds.css‎

Lines changed: 144 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
1+
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
22
@layer properties;
33
@layer theme, base, components, utilities;
44
@layer theme {
@@ -8,6 +8,8 @@
88
--font-mono: "ui-monospace", "monospace";
99
--color-red-100: oklch(93.6% 0.032 17.717);
1010
--color-red-800: oklch(44.4% 0.177 26.899);
11+
--color-amber-100: oklch(96.2% 0.059 95.617);
12+
--color-amber-700: oklch(55.5% 0.163 48.998);
1113
--color-yellow-100: oklch(97.3% 0.071 103.193);
1214
--color-yellow-800: oklch(47.6% 0.114 61.907);
1315
--color-green-100: oklch(96.2% 0.044 156.743);
@@ -39,14 +41,57 @@
3941
--font-weight-light: 300;
4042
--font-weight-normal: 400;
4143
--font-weight-medium: 500;
44+
--font-weight-bold: 700;
4245
--tracking-wide: 0.025em;
46+
--radius-md: 0.375rem;
4347
--radius-lg: 0.5rem;
4448
--default-transition-duration: 150ms;
4549
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
4650
--default-font-family: var(--font-sans);
4751
--default-mono-font-family: var(--font-mono);
4852
--font-body: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
4953
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
54+
--color-primary-50: var(--hds-primary);
55+
@supports (color: color-mix(in lab, red, red)) {
56+
--color-primary-50: color-mix(in oklch, var(--hds-primary) 5%, white);
57+
}
58+
--color-primary-100: var(--hds-primary);
59+
@supports (color: color-mix(in lab, red, red)) {
60+
--color-primary-100: color-mix(in oklch, var(--hds-primary) 10%, white);
61+
}
62+
--color-primary-200: var(--hds-primary);
63+
@supports (color: color-mix(in lab, red, red)) {
64+
--color-primary-200: color-mix(in oklch, var(--hds-primary) 25%, white);
65+
}
66+
--color-primary-300: var(--hds-primary);
67+
@supports (color: color-mix(in lab, red, red)) {
68+
--color-primary-300: color-mix(in oklch, var(--hds-primary) 40%, white);
69+
}
70+
--color-primary-400: var(--hds-primary);
71+
@supports (color: color-mix(in lab, red, red)) {
72+
--color-primary-400: color-mix(in oklch, var(--hds-primary) 60%, white);
73+
}
74+
--color-primary-500: var(--hds-primary);
75+
--color-primary-600: var(--hds-primary);
76+
@supports (color: color-mix(in lab, red, red)) {
77+
--color-primary-600: color-mix(in oklch, var(--hds-primary) 85%, black);
78+
}
79+
--color-primary-700: var(--hds-primary);
80+
@supports (color: color-mix(in lab, red, red)) {
81+
--color-primary-700: color-mix(in oklch, var(--hds-primary) 70%, black);
82+
}
83+
--color-primary-800: var(--hds-primary);
84+
@supports (color: color-mix(in lab, red, red)) {
85+
--color-primary-800: color-mix(in oklch, var(--hds-primary) 50%, black);
86+
}
87+
--color-primary-900: var(--hds-primary);
88+
@supports (color: color-mix(in lab, red, red)) {
89+
--color-primary-900: color-mix(in oklch, var(--hds-primary) 35%, black);
90+
}
91+
--color-primary-950: var(--hds-primary);
92+
@supports (color: color-mix(in lab, red, red)) {
93+
--color-primary-950: color-mix(in oklch, var(--hds-primary) 20%, black);
94+
}
5095
}
5196
}
5297
@layer base {
@@ -181,6 +226,9 @@
181226
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
182227
padding-block: 0;
183228
}
229+
::-webkit-calendar-picker-indicator {
230+
line-height: 1;
231+
}
184232
:-moz-ui-invalid {
185233
box-shadow: none;
186234
}
@@ -304,7 +352,7 @@
304352
}
305353
:where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
306354
border-color: var(--tw-prose-hr);
307-
border-top-width: 1;
355+
border-top-width: 1px;
308356
margin-top: 3em;
309357
margin-bottom: 3em;
310358
}
@@ -389,7 +437,7 @@
389437
font-weight: 500;
390438
font-family: inherit;
391439
color: var(--tw-prose-kbd);
392-
box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
440+
box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
393441
font-size: 0.875em;
394442
border-radius: 0.3125rem;
395443
padding-top: 0.1875em;
@@ -525,7 +573,7 @@
525573
--tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
526574
--tw-prose-captions: oklch(55.1% 0.027 264.364);
527575
--tw-prose-kbd: oklch(21% 0.034 264.665);
528-
--tw-prose-kbd-shadows: NaN NaN NaN;
576+
--tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
529577
--tw-prose-code: oklch(21% 0.034 264.665);
530578
--tw-prose-pre-code: oklch(92.8% 0.006 264.531);
531579
--tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
@@ -543,7 +591,7 @@
543591
--tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
544592
--tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
545593
--tw-prose-invert-kbd: #fff;
546-
--tw-prose-invert-kbd-shadows: 255 255 255;
594+
--tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
547595
--tw-prose-invert-code: #fff;
548596
--tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
549597
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
@@ -670,6 +718,9 @@
670718
.grid {
671719
display: grid;
672720
}
721+
.hidden {
722+
display: none;
723+
}
673724
.inline-block {
674725
display: inline-block;
675726
}
@@ -706,9 +757,15 @@
706757
.w-5 {
707758
width: calc(var(--spacing) * 5);
708759
}
760+
.w-8 {
761+
width: calc(var(--spacing) * 8);
762+
}
709763
.w-10 {
710764
width: calc(var(--spacing) * 10);
711765
}
766+
.w-12 {
767+
width: calc(var(--spacing) * 12);
768+
}
712769
.w-full {
713770
width: 100%;
714771
}
@@ -730,6 +787,9 @@
730787
.flex-1 {
731788
flex: 1;
732789
}
790+
.shrink-0 {
791+
flex-shrink: 0;
792+
}
733793
.cursor-not-allowed {
734794
cursor: not-allowed;
735795
}
@@ -757,6 +817,9 @@
757817
.justify-center {
758818
justify-content: center;
759819
}
820+
.gap-1 {
821+
gap: calc(var(--spacing) * 1);
822+
}
760823
.gap-2 {
761824
gap: calc(var(--spacing) * 2);
762825
}
@@ -780,6 +843,14 @@
780843
margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
781844
}
782845
}
846+
.truncate {
847+
overflow: hidden;
848+
text-overflow: ellipsis;
849+
white-space: nowrap;
850+
}
851+
.overflow-hidden {
852+
overflow: hidden;
853+
}
783854
.overflow-x-auto {
784855
overflow-x: auto;
785856
}
@@ -795,6 +866,9 @@
795866
.rounded-lg {
796867
border-radius: var(--radius-lg);
797868
}
869+
.rounded-md {
870+
border-radius: var(--radius-md);
871+
}
798872
.rounded-t-lg {
799873
border-top-left-radius: var(--radius-lg);
800874
border-top-right-radius: var(--radius-lg);
@@ -853,6 +927,15 @@
853927
.bg-\[var\(--hds-secondary\)\] {
854928
background-color: var(--hds-secondary);
855929
}
930+
.bg-\[var\(--hds-secondary\)\]\/30 {
931+
background-color: var(--hds-secondary);
932+
@supports (color: color-mix(in lab, red, red)) {
933+
background-color: color-mix(in oklab, var(--hds-secondary) 30%, transparent);
934+
}
935+
}
936+
.bg-amber-100 {
937+
background-color: var(--color-amber-100);
938+
}
856939
.bg-gray-700 {
857940
background-color: var(--color-gray-700);
858941
}
@@ -862,6 +945,39 @@
862945
.bg-green-100 {
863946
background-color: var(--color-green-100);
864947
}
948+
.bg-primary-50 {
949+
background-color: var(--color-primary-50);
950+
}
951+
.bg-primary-100 {
952+
background-color: var(--color-primary-100);
953+
}
954+
.bg-primary-200 {
955+
background-color: var(--color-primary-200);
956+
}
957+
.bg-primary-300 {
958+
background-color: var(--color-primary-300);
959+
}
960+
.bg-primary-400 {
961+
background-color: var(--color-primary-400);
962+
}
963+
.bg-primary-500 {
964+
background-color: var(--color-primary-500);
965+
}
966+
.bg-primary-600 {
967+
background-color: var(--color-primary-600);
968+
}
969+
.bg-primary-700 {
970+
background-color: var(--color-primary-700);
971+
}
972+
.bg-primary-800 {
973+
background-color: var(--color-primary-800);
974+
}
975+
.bg-primary-900 {
976+
background-color: var(--color-primary-900);
977+
}
978+
.bg-primary-950 {
979+
background-color: var(--color-primary-950);
980+
}
865981
.bg-red-100 {
866982
background-color: var(--color-red-100);
867983
}
@@ -883,6 +999,9 @@
883999
.p-8 {
8841000
padding: calc(var(--spacing) * 8);
8851001
}
1002+
.px-1 {
1003+
padding-inline: calc(var(--spacing) * 1);
1004+
}
8861005
.px-1\.5 {
8871006
padding-inline: calc(var(--spacing) * 1.5);
8881007
}
@@ -966,6 +1085,10 @@
9661085
.text-\[10px\] {
9671086
font-size: 10px;
9681087
}
1088+
.font-bold {
1089+
--tw-font-weight: var(--font-weight-bold);
1090+
font-weight: var(--font-weight-bold);
1091+
}
9691092
.font-light {
9701093
--tw-font-weight: var(--font-weight-light);
9711094
font-weight: var(--font-weight-light);
@@ -1003,6 +1126,9 @@
10031126
.text-\[var\(--hds-secondary-foreground\)\] {
10041127
color: var(--hds-secondary-foreground);
10051128
}
1129+
.text-amber-700 {
1130+
color: var(--color-amber-700);
1131+
}
10061132
.text-gray-300 {
10071133
color: var(--color-gray-300);
10081134
}
@@ -1046,6 +1172,16 @@
10461172
}
10471173
}
10481174
}
1175+
.hover\:bg-\[var\(--hds-secondary\)\]\/50 {
1176+
&:hover {
1177+
@media (hover: hover) {
1178+
background-color: var(--hds-secondary);
1179+
@supports (color: color-mix(in lab, red, red)) {
1180+
background-color: color-mix(in oklab, var(--hds-secondary) 50%, transparent);
1181+
}
1182+
}
1183+
}
1184+
}
10491185
.hover\:underline {
10501186
&:hover {
10511187
@media (hover: hover) {
@@ -1151,7 +1287,7 @@
11511287
--hds-primary-foreground: #FFFFFF;
11521288
--hds-secondary: #CCFBF1;
11531289
--hds-secondary-foreground: #115E59;
1154-
--hds-muted: #F0FDFA;
1290+
--hds-muted: #E0F5EF;
11551291
--hds-muted-foreground: #5F8B87;
11561292
--hds-accent: #CCFBF1;
11571293
--hds-accent-foreground: #0D9488;
@@ -1276,11 +1412,13 @@ tr:hover {
12761412
code {
12771413
font-family: var(--font-mono, ui-monospace, monospace);
12781414
font-size: 0.875em;
1415+
color: var(--hds-foreground, #111928);
12791416
background-color: var(--hds-muted, #f3f4f6);
12801417
padding: 0.15em 0.4em;
12811418
border-radius: 0.25em;
12821419
}
12831420
pre {
1421+
color: var(--hds-foreground, #111928);
12841422
background-color: var(--hds-muted, #f3f4f6);
12851423
padding: 1em;
12861424
border-radius: 0.5em;

‎hds.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎images/.DS_Store‎

6 KB
Binary file not shown.

‎images/logos/.DS_Store‎

6 KB
Binary file not shown.

‎images/logos/badge-outlined/.DS_Store‎

6 KB
Binary file not shown.

‎images/logos/favicon/hds-favicon-32x32.png‎

2.91 KB
Loading

0 commit comments

Comments
 (0)