@c2n/theme 0.0.7 → 0.0.8

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.
package/dist/base.css CHANGED
@@ -43,7 +43,6 @@
43
43
  --c2-autocomplete--border-radius: var(--c2-theme--radius-lg, 8px);
44
44
  --c2-autocomplete__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
45
45
  --c2-autocomplete__focus--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, rgb(2, 101, 220));
46
- --c2-autocomplete__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
47
46
  --c2-autocomplete__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
48
47
  --c2-autocomplete__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
49
48
  --c2-autocomplete__icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
@@ -329,6 +328,53 @@
329
328
  --c2-copy-button--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
330
329
  }
331
330
 
331
+ /* @c2n/date-input */
332
+ :root,
333
+ :host {
334
+ --c2-date-input--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
335
+ --c2-date-input--border-radius: var(--c2-theme--radius-md, 6px);
336
+ --c2-date-input--color: var(--c2-theme--color-on-surface, #18181b);
337
+ --c2-date-input--background: var(--c2-theme--color-surface, #ffffff);
338
+ --c2-date-input--font-size: var(--c2-theme--font-size-md, 14px);
339
+ --c2-date-input__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
340
+ --c2-date-input__focus--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #0265dc);
341
+ --c2-date-input__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
342
+ --c2-date-input__error--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
343
+ --c2-date-input__read-only--background: var(--c2-theme--color-surface-container-low, #fafafa);
344
+ --c2-date-input__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
345
+ --c2-date-input__calendar-icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
346
+ --c2-date-input__calendar-icon__hover--color: var(--c2-theme--color-on-surface, #18181b);
347
+ --c2-date-input__supporting-text--font-size: var(--c2-theme--font-size-sm, 12px);
348
+ --c2-date-input__supporting-text--color: var(--c2-theme--color-on-surface-variant, #71717a);
349
+ --c2-date-input__supporting-text__error--color: var(--c2-theme--color-error, #dc2626);
350
+ }
351
+
352
+ /* @c2n/date-selector */
353
+ :root,
354
+ :host {
355
+ --c2-date-selector--background: var(--c2-theme--color-surface, #ffffff);
356
+ --c2-date-selector--color: var(--c2-theme--color-on-surface, #18181b);
357
+ --c2-date-selector--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
358
+ --c2-date-selector--border-radius: var(--c2-theme--radius-xl, 14px);
359
+ --c2-date-selector--box-shadow: var(--c2-theme--shadow-md, 0 12px 32px rgba(24, 24, 27, 0.08));
360
+ --c2-date-selector--font-size: var(--c2-theme--font-size-md, 14px);
361
+ --c2-date-selector__day--border-radius: var(--c2-theme--radius-full, 999px);
362
+ --c2-date-selector__day__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
363
+ --c2-date-selector__day__today--color: var(--c2-theme--color-primary, #0265dc);
364
+ --c2-date-selector__day__today--font-weight: var(--c2-theme--font-weight-semibold, 600);
365
+ --c2-date-selector__day__selected--background: var(--c2-theme--color-primary, #0265dc);
366
+ --c2-date-selector__day__selected--color: var(--c2-theme--color-on-primary, #ffffff);
367
+ --c2-date-selector__range--background: var(--c2-theme--color-primary-container, #edf1fe);
368
+ --c2-date-selector__range--color: var(--c2-theme--color-on-surface, #18181b);
369
+ --c2-date-selector__day__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
370
+ --c2-date-selector__weekday--color: var(--c2-theme--color-on-surface-variant, #71717a);
371
+ --c2-date-selector__weekday--font-size: var(--c2-theme--font-size-sm, 12px);
372
+ --c2-date-selector__month-title--font-weight: var(--c2-theme--font-weight-semibold, 600);
373
+ --c2-date-selector__navigation__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
374
+ --c2-date-selector__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
375
+ --c2-date-selector__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
376
+ }
377
+
332
378
  /* @c2n/details */
333
379
  :root,
334
380
  :host {
@@ -549,6 +595,32 @@
549
595
  --c2-navigation-menu-link__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
550
596
  }
551
597
 
598
+ /* @c2n/number-input */
599
+ :root,
600
+ :host {
601
+ --c2-number-input--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
602
+ --c2-number-input--border-radius: var(--c2-theme--radius-md, 6px);
603
+ --c2-number-input--color: var(--c2-theme--color-on-surface, #18181b);
604
+ --c2-number-input--background: var(--c2-theme--color-surface, #ffffff);
605
+ --c2-number-input--font-size: var(--c2-theme--font-size-md, 14px);
606
+ --c2-number-input__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
607
+ --c2-number-input__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
608
+ --c2-number-input__focus--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #0265dc);
609
+ --c2-number-input__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
610
+ --c2-number-input__error--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
611
+ --c2-number-input__read-only--background: var(--c2-theme--color-surface-container-low, #fafafa);
612
+ --c2-number-input__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
613
+ --c2-number-input__stepper--border-left: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
614
+ --c2-number-input__stepper--color: var(--c2-theme--color-on-surface-variant, #71717a);
615
+ --c2-number-input__stepper__hover--color: var(--c2-theme--color-on-surface, #18181b);
616
+ --c2-number-input__stepper__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
617
+ --c2-number-input__adornment--color: var(--c2-theme--color-on-surface-variant, #71717a);
618
+ --c2-number-input__adornment--font-size: var(--c2-theme--font-size-md, 14px);
619
+ --c2-number-input__supporting-text--font-size: var(--c2-theme--font-size-sm, 12px);
620
+ --c2-number-input__supporting-text--color: var(--c2-theme--color-on-surface-variant, #71717a);
621
+ --c2-number-input__supporting-text__error--color: var(--c2-theme--color-error, #dc2626);
622
+ }
623
+
552
624
  /* @c2n/overlay */
553
625
  :root,
554
626
  :host {
package/dist/report.json CHANGED
@@ -128,9 +128,9 @@
128
128
  },
129
129
  "@c2n/autocomplete": {
130
130
  "total": 44,
131
- "mapped": 27,
131
+ "mapped": 26,
132
132
  "unmapped": 15,
133
- "excluded": 2,
133
+ "excluded": 3,
134
134
  "noDefault": 0,
135
135
  "unmappedVars": [
136
136
  {
@@ -240,6 +240,13 @@
240
240
  }
241
241
  ],
242
242
  "excludedVars": [
243
+ {
244
+ "name": "--c2-autocomplete__focus--outline",
245
+ "type": "outline",
246
+ "default": "none",
247
+ "rule": "R0",
248
+ "reason": "focus is indicated by the accent border"
249
+ },
243
250
  {
244
251
  "name": "--c2-autocomplete__header--background",
245
252
  "type": "color",
@@ -1832,6 +1839,147 @@
1832
1839
  }
1833
1840
  ]
1834
1841
  },
1842
+ "@c2n/date-input": {
1843
+ "total": 26,
1844
+ "mapped": 16,
1845
+ "unmapped": 8,
1846
+ "excluded": 2,
1847
+ "noDefault": 0,
1848
+ "unmappedVars": [
1849
+ {
1850
+ "name": "--c2-date-input--min-height",
1851
+ "type": "pixel",
1852
+ "default": "36px",
1853
+ "rule": "R13",
1854
+ "reason": "property min-height is not themed by design"
1855
+ },
1856
+ {
1857
+ "name": "--c2-date-input--gap",
1858
+ "type": "pixel",
1859
+ "default": "8px",
1860
+ "rule": "R13",
1861
+ "reason": "property gap is not themed by design"
1862
+ },
1863
+ {
1864
+ "name": "--c2-date-input--padding",
1865
+ "type": "padding",
1866
+ "default": "6px 8px 6px 12px",
1867
+ "rule": "R13",
1868
+ "reason": "property padding is not themed by design"
1869
+ },
1870
+ {
1871
+ "name": "--c2-date-input--line-height",
1872
+ "type": "pixel",
1873
+ "default": "20px",
1874
+ "rule": "R13",
1875
+ "reason": "property line-height is not themed by design"
1876
+ },
1877
+ {
1878
+ "name": "--c2-date-input__focus--outline-offset",
1879
+ "type": "pixel",
1880
+ "default": "0px",
1881
+ "rule": "R13",
1882
+ "reason": "property outline-offset is not themed by design"
1883
+ },
1884
+ {
1885
+ "name": "--c2-date-input__calendar-icon--size",
1886
+ "type": "pixel",
1887
+ "default": "18px",
1888
+ "rule": "R13",
1889
+ "reason": "property size is not themed by design"
1890
+ },
1891
+ {
1892
+ "name": "--c2-date-input__supporting-text--gap",
1893
+ "type": "pixel",
1894
+ "default": "4px",
1895
+ "rule": "R13",
1896
+ "reason": "property gap is not themed by design"
1897
+ },
1898
+ {
1899
+ "name": "--c2-date-input__supporting-text--line-height",
1900
+ "type": "pixel",
1901
+ "default": "16px",
1902
+ "rule": "R13",
1903
+ "reason": "property line-height is not themed by design"
1904
+ }
1905
+ ],
1906
+ "excludedVars": [
1907
+ {
1908
+ "name": "--c2-date-input--font-family",
1909
+ "type": "font-family",
1910
+ "default": "inherit",
1911
+ "rule": "R2",
1912
+ "reason": "keyword / derived value inherit"
1913
+ },
1914
+ {
1915
+ "name": "--c2-date-input__error__focus--outline",
1916
+ "type": "outline",
1917
+ "default": "2px solid rgba(220, 38, 38, 0.25)",
1918
+ "rule": "R0",
1919
+ "reason": "error focus ring is intentionally red"
1920
+ }
1921
+ ]
1922
+ },
1923
+ "@c2n/date-selector": {
1924
+ "total": 28,
1925
+ "mapped": 21,
1926
+ "unmapped": 6,
1927
+ "excluded": 1,
1928
+ "noDefault": 0,
1929
+ "unmappedVars": [
1930
+ {
1931
+ "name": "--c2-date-selector--min-width",
1932
+ "type": "pixel",
1933
+ "default": "312px",
1934
+ "rule": "R13",
1935
+ "reason": "property min-width is not themed by design"
1936
+ },
1937
+ {
1938
+ "name": "--c2-date-selector--padding",
1939
+ "type": "padding",
1940
+ "default": "16px",
1941
+ "rule": "R13",
1942
+ "reason": "property padding is not themed by design"
1943
+ },
1944
+ {
1945
+ "name": "--c2-date-selector--month-gap",
1946
+ "type": "pixel",
1947
+ "default": "40px",
1948
+ "rule": "R13",
1949
+ "reason": "property month-gap is not themed by design"
1950
+ },
1951
+ {
1952
+ "name": "--c2-date-selector__day--size",
1953
+ "type": "pixel",
1954
+ "default": "40px",
1955
+ "rule": "R13",
1956
+ "reason": "property size is not themed by design"
1957
+ },
1958
+ {
1959
+ "name": "--c2-date-selector__navigation--size",
1960
+ "type": "pixel",
1961
+ "default": "32px",
1962
+ "rule": "R13",
1963
+ "reason": "property size is not themed by design"
1964
+ },
1965
+ {
1966
+ "name": "--c2-date-selector__focus--outline-offset",
1967
+ "type": "pixel",
1968
+ "default": "2px",
1969
+ "rule": "R13",
1970
+ "reason": "property outline-offset is not themed by design"
1971
+ }
1972
+ ],
1973
+ "excludedVars": [
1974
+ {
1975
+ "name": "--c2-date-selector--font-family",
1976
+ "type": "font-family",
1977
+ "default": "inherit",
1978
+ "rule": "R2",
1979
+ "reason": "keyword / derived value inherit"
1980
+ }
1981
+ ]
1982
+ },
1835
1983
  "@c2n/details": {
1836
1984
  "total": 43,
1837
1985
  "mapped": 16,
@@ -1980,10 +2128,10 @@
1980
2128
  ]
1981
2129
  },
1982
2130
  "@c2n/header": {
1983
- "total": 12,
2131
+ "total": 13,
1984
2132
  "mapped": 3,
1985
2133
  "unmapped": 8,
1986
- "excluded": 1,
2134
+ "excluded": 2,
1987
2135
  "noDefault": 0,
1988
2136
  "unmappedVars": [
1989
2137
  {
@@ -2050,6 +2198,13 @@
2050
2198
  "default": "none",
2051
2199
  "rule": "R2",
2052
2200
  "reason": "keyword / derived value none"
2201
+ },
2202
+ {
2203
+ "name": "--c2-header__content--max-width",
2204
+ "type": "max-width",
2205
+ "default": "none",
2206
+ "rule": "R2",
2207
+ "reason": "keyword / derived value none"
2053
2208
  }
2054
2209
  ]
2055
2210
  },
@@ -3379,6 +3534,94 @@
3379
3534
  }
3380
3535
  ]
3381
3536
  },
3537
+ "@c2n/number-input": {
3538
+ "total": 32,
3539
+ "mapped": 21,
3540
+ "unmapped": 9,
3541
+ "excluded": 2,
3542
+ "noDefault": 0,
3543
+ "unmappedVars": [
3544
+ {
3545
+ "name": "--c2-number-input--min-height",
3546
+ "type": "pixel",
3547
+ "default": "36px",
3548
+ "rule": "R13",
3549
+ "reason": "property min-height is not themed by design"
3550
+ },
3551
+ {
3552
+ "name": "--c2-number-input--line-height",
3553
+ "type": "pixel",
3554
+ "default": "20px",
3555
+ "rule": "R13",
3556
+ "reason": "property line-height is not themed by design"
3557
+ },
3558
+ {
3559
+ "name": "--c2-number-input__value--padding",
3560
+ "type": "padding",
3561
+ "default": "6px 10px 6px 12px",
3562
+ "rule": "R13",
3563
+ "reason": "property padding is not themed by design"
3564
+ },
3565
+ {
3566
+ "name": "--c2-number-input__value--gap",
3567
+ "type": "pixel",
3568
+ "default": "8px",
3569
+ "rule": "R13",
3570
+ "reason": "property gap is not themed by design"
3571
+ },
3572
+ {
3573
+ "name": "--c2-number-input__focus--outline-offset",
3574
+ "type": "pixel",
3575
+ "default": "0px",
3576
+ "rule": "R13",
3577
+ "reason": "property outline-offset is not themed by design"
3578
+ },
3579
+ {
3580
+ "name": "--c2-number-input__stepper--width",
3581
+ "type": "pixel",
3582
+ "default": "28px",
3583
+ "rule": "R13",
3584
+ "reason": "property width is not themed by design"
3585
+ },
3586
+ {
3587
+ "name": "--c2-number-input__stepper-icon--size",
3588
+ "type": "pixel",
3589
+ "default": "14px",
3590
+ "rule": "R13",
3591
+ "reason": "property size is not themed by design"
3592
+ },
3593
+ {
3594
+ "name": "--c2-number-input__supporting-text--gap",
3595
+ "type": "pixel",
3596
+ "default": "4px",
3597
+ "rule": "R13",
3598
+ "reason": "property gap is not themed by design"
3599
+ },
3600
+ {
3601
+ "name": "--c2-number-input__supporting-text--line-height",
3602
+ "type": "pixel",
3603
+ "default": "16px",
3604
+ "rule": "R13",
3605
+ "reason": "property line-height is not themed by design"
3606
+ }
3607
+ ],
3608
+ "excludedVars": [
3609
+ {
3610
+ "name": "--c2-number-input--font-family",
3611
+ "type": "font-family",
3612
+ "default": "inherit",
3613
+ "rule": "R2",
3614
+ "reason": "keyword / derived value inherit"
3615
+ },
3616
+ {
3617
+ "name": "--c2-number-input__error__focus--outline",
3618
+ "type": "outline",
3619
+ "default": "2px solid rgba(220, 38, 38, 0.25)",
3620
+ "rule": "R0",
3621
+ "reason": "error focus ring is intentionally red"
3622
+ }
3623
+ ]
3624
+ },
3382
3625
  "@c2n/overlay": {
3383
3626
  "total": 5,
3384
3627
  "mapped": 1,
@@ -4700,9 +4943,9 @@
4700
4943
  ]
4701
4944
  },
4702
4945
  "@c2n/table": {
4703
- "total": 63,
4946
+ "total": 68,
4704
4947
  "mapped": 39,
4705
- "unmapped": 19,
4948
+ "unmapped": 24,
4706
4949
  "excluded": 5,
4707
4950
  "noDefault": 0,
4708
4951
  "unmappedVars": [
@@ -4790,6 +5033,41 @@
4790
5033
  "rule": "R13",
4791
5034
  "reason": "property height is not themed by design"
4792
5035
  },
5036
+ {
5037
+ "name": "--c2-table__row__added--background",
5038
+ "type": "color",
5039
+ "default": "rgba(22,163,74,0.16)",
5040
+ "rule": "R6",
5041
+ "reason": "unknown background rgba(22,163,74,0.16)"
5042
+ },
5043
+ {
5044
+ "name": "--c2-table__row__removed--background",
5045
+ "type": "color",
5046
+ "default": "rgba(220,38,38,0.14)",
5047
+ "rule": "R6",
5048
+ "reason": "unknown background rgba(220,38,38,0.14)"
5049
+ },
5050
+ {
5051
+ "name": "--c2-table__row__increased--background",
5052
+ "type": "color",
5053
+ "default": "rgba(22,163,74,0.14)",
5054
+ "rule": "R6",
5055
+ "reason": "unknown background rgba(22,163,74,0.14)"
5056
+ },
5057
+ {
5058
+ "name": "--c2-table__row__decreased--background",
5059
+ "type": "color",
5060
+ "default": "rgba(220,38,38,0.12)",
5061
+ "rule": "R6",
5062
+ "reason": "unknown background rgba(220,38,38,0.12)"
5063
+ },
5064
+ {
5065
+ "name": "--c2-table__row__modified--background",
5066
+ "type": "color",
5067
+ "default": "rgba(2,101,220,0.1)",
5068
+ "rule": "R6",
5069
+ "reason": "unknown background rgba(2,101,220,0.1)"
5070
+ },
4793
5071
  {
4794
5072
  "name": "--c2-table__cell--padding",
4795
5073
  "type": "padding",
@@ -5477,10 +5755,10 @@
5477
5755
  }
5478
5756
  },
5479
5757
  "totals": {
5480
- "total": 1608,
5481
- "mapped": 672,
5482
- "unmapped": 586,
5483
- "excluded": 116,
5758
+ "total": 1700,
5759
+ "mapped": 729,
5760
+ "unmapped": 614,
5761
+ "excluded": 123,
5484
5762
  "noDefault": 234
5485
5763
  },
5486
5764
  "unparsed": []
package/dist/theme.css CHANGED
@@ -171,7 +171,6 @@
171
171
  --c2-autocomplete--border-radius: var(--c2-theme--radius-lg, 8px);
172
172
  --c2-autocomplete__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
173
173
  --c2-autocomplete__focus--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, rgb(2, 101, 220));
174
- --c2-autocomplete__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
175
174
  --c2-autocomplete__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
176
175
  --c2-autocomplete__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
177
176
  --c2-autocomplete__icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
@@ -457,6 +456,53 @@
457
456
  --c2-copy-button--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
458
457
  }
459
458
 
459
+ /* @c2n/date-input */
460
+ :root,
461
+ :host {
462
+ --c2-date-input--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
463
+ --c2-date-input--border-radius: var(--c2-theme--radius-md, 6px);
464
+ --c2-date-input--color: var(--c2-theme--color-on-surface, #18181b);
465
+ --c2-date-input--background: var(--c2-theme--color-surface, #ffffff);
466
+ --c2-date-input--font-size: var(--c2-theme--font-size-md, 14px);
467
+ --c2-date-input__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
468
+ --c2-date-input__focus--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #0265dc);
469
+ --c2-date-input__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
470
+ --c2-date-input__error--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
471
+ --c2-date-input__read-only--background: var(--c2-theme--color-surface-container-low, #fafafa);
472
+ --c2-date-input__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
473
+ --c2-date-input__calendar-icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
474
+ --c2-date-input__calendar-icon__hover--color: var(--c2-theme--color-on-surface, #18181b);
475
+ --c2-date-input__supporting-text--font-size: var(--c2-theme--font-size-sm, 12px);
476
+ --c2-date-input__supporting-text--color: var(--c2-theme--color-on-surface-variant, #71717a);
477
+ --c2-date-input__supporting-text__error--color: var(--c2-theme--color-error, #dc2626);
478
+ }
479
+
480
+ /* @c2n/date-selector */
481
+ :root,
482
+ :host {
483
+ --c2-date-selector--background: var(--c2-theme--color-surface, #ffffff);
484
+ --c2-date-selector--color: var(--c2-theme--color-on-surface, #18181b);
485
+ --c2-date-selector--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
486
+ --c2-date-selector--border-radius: var(--c2-theme--radius-xl, 14px);
487
+ --c2-date-selector--box-shadow: var(--c2-theme--shadow-md, 0 12px 32px rgba(24, 24, 27, 0.08));
488
+ --c2-date-selector--font-size: var(--c2-theme--font-size-md, 14px);
489
+ --c2-date-selector__day--border-radius: var(--c2-theme--radius-full, 999px);
490
+ --c2-date-selector__day__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
491
+ --c2-date-selector__day__today--color: var(--c2-theme--color-primary, #0265dc);
492
+ --c2-date-selector__day__today--font-weight: var(--c2-theme--font-weight-semibold, 600);
493
+ --c2-date-selector__day__selected--background: var(--c2-theme--color-primary, #0265dc);
494
+ --c2-date-selector__day__selected--color: var(--c2-theme--color-on-primary, #ffffff);
495
+ --c2-date-selector__range--background: var(--c2-theme--color-primary-container, #edf1fe);
496
+ --c2-date-selector__range--color: var(--c2-theme--color-on-surface, #18181b);
497
+ --c2-date-selector__day__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
498
+ --c2-date-selector__weekday--color: var(--c2-theme--color-on-surface-variant, #71717a);
499
+ --c2-date-selector__weekday--font-size: var(--c2-theme--font-size-sm, 12px);
500
+ --c2-date-selector__month-title--font-weight: var(--c2-theme--font-weight-semibold, 600);
501
+ --c2-date-selector__navigation__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
502
+ --c2-date-selector__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
503
+ --c2-date-selector__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
504
+ }
505
+
460
506
  /* @c2n/details */
461
507
  :root,
462
508
  :host {
@@ -677,6 +723,32 @@
677
723
  --c2-navigation-menu-link__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
678
724
  }
679
725
 
726
+ /* @c2n/number-input */
727
+ :root,
728
+ :host {
729
+ --c2-number-input--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
730
+ --c2-number-input--border-radius: var(--c2-theme--radius-md, 6px);
731
+ --c2-number-input--color: var(--c2-theme--color-on-surface, #18181b);
732
+ --c2-number-input--background: var(--c2-theme--color-surface, #ffffff);
733
+ --c2-number-input--font-size: var(--c2-theme--font-size-md, 14px);
734
+ --c2-number-input__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
735
+ --c2-number-input__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
736
+ --c2-number-input__focus--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #0265dc);
737
+ --c2-number-input__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
738
+ --c2-number-input__error--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
739
+ --c2-number-input__read-only--background: var(--c2-theme--color-surface-container-low, #fafafa);
740
+ --c2-number-input__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
741
+ --c2-number-input__stepper--border-left: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
742
+ --c2-number-input__stepper--color: var(--c2-theme--color-on-surface-variant, #71717a);
743
+ --c2-number-input__stepper__hover--color: var(--c2-theme--color-on-surface, #18181b);
744
+ --c2-number-input__stepper__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
745
+ --c2-number-input__adornment--color: var(--c2-theme--color-on-surface-variant, #71717a);
746
+ --c2-number-input__adornment--font-size: var(--c2-theme--font-size-md, 14px);
747
+ --c2-number-input__supporting-text--font-size: var(--c2-theme--font-size-sm, 12px);
748
+ --c2-number-input__supporting-text--color: var(--c2-theme--color-on-surface-variant, #71717a);
749
+ --c2-number-input__supporting-text__error--color: var(--c2-theme--color-error, #dc2626);
750
+ }
751
+
680
752
  /* @c2n/overlay */
681
753
  :root,
682
754
  :host {
package/dist/tokens.json CHANGED
@@ -330,7 +330,6 @@
330
330
  "--c2-autocomplete--border-radius": "--c2-theme--radius-lg",
331
331
  "--c2-autocomplete__hover--border": "--c2-theme--color-outline-strong",
332
332
  "--c2-autocomplete__focus--border": "--c2-theme--color-primary",
333
- "--c2-autocomplete__focus--outline": "--c2-theme--focus-ring",
334
333
  "--c2-autocomplete__placeholder--color": "--c2-theme--color-on-surface-variant",
335
334
  "--c2-autocomplete__disabled--opacity": "--c2-theme--disabled-opacity",
336
335
  "--c2-autocomplete__icon--color": "--c2-theme--color-on-surface-variant",
@@ -522,6 +521,43 @@
522
521
  "--c2-copy-button__container__focus--outline": "--c2-theme--focus-ring",
523
522
  "--c2-copy-button__container__disabled--opacity": "--c2-theme--disabled-opacity",
524
523
  "--c2-copy-button--transition-duration": "--c2-theme--motion-scale",
524
+ "--c2-date-input--border": "--c2-theme--border",
525
+ "--c2-date-input--border-radius": "--c2-theme--radius-md",
526
+ "--c2-date-input--color": "--c2-theme--color-on-surface",
527
+ "--c2-date-input--background": "--c2-theme--color-surface",
528
+ "--c2-date-input--font-size": "--c2-theme--font-size-md",
529
+ "--c2-date-input__hover--border": "--c2-theme--color-outline-strong",
530
+ "--c2-date-input__focus--border": "--c2-theme--color-primary",
531
+ "--c2-date-input__focus--outline": "--c2-theme--focus-ring",
532
+ "--c2-date-input__error--border": "--c2-theme--color-error",
533
+ "--c2-date-input__read-only--background": "--c2-theme--color-surface-container-low",
534
+ "--c2-date-input__disabled--opacity": "--c2-theme--disabled-opacity",
535
+ "--c2-date-input__calendar-icon--color": "--c2-theme--color-on-surface-variant",
536
+ "--c2-date-input__calendar-icon__hover--color": "--c2-theme--color-on-surface",
537
+ "--c2-date-input__supporting-text--font-size": "--c2-theme--font-size-sm",
538
+ "--c2-date-input__supporting-text--color": "--c2-theme--color-on-surface-variant",
539
+ "--c2-date-input__supporting-text__error--color": "--c2-theme--color-error",
540
+ "--c2-date-selector--background": "--c2-theme--color-surface",
541
+ "--c2-date-selector--color": "--c2-theme--color-on-surface",
542
+ "--c2-date-selector--border": "--c2-theme--color-outline-variant",
543
+ "--c2-date-selector--border-radius": "--c2-theme--radius-xl",
544
+ "--c2-date-selector--box-shadow": "--c2-theme--shadow-md",
545
+ "--c2-date-selector--font-size": "--c2-theme--font-size-md",
546
+ "--c2-date-selector__day--border-radius": "--c2-theme--radius-full",
547
+ "--c2-date-selector__day__hover--background": "--c2-theme--color-surface-container",
548
+ "--c2-date-selector__day__today--color": "--c2-theme--color-primary",
549
+ "--c2-date-selector__day__today--font-weight": "--c2-theme--font-weight-semibold",
550
+ "--c2-date-selector__day__selected--background": "--c2-theme--color-primary",
551
+ "--c2-date-selector__day__selected--color": "--c2-theme--color-on-primary",
552
+ "--c2-date-selector__range--background": "--c2-theme--color-primary-container",
553
+ "--c2-date-selector__range--color": "--c2-theme--color-on-surface",
554
+ "--c2-date-selector__day__disabled--opacity": "--c2-theme--disabled-opacity",
555
+ "--c2-date-selector__weekday--color": "--c2-theme--color-on-surface-variant",
556
+ "--c2-date-selector__weekday--font-size": "--c2-theme--font-size-sm",
557
+ "--c2-date-selector__month-title--font-weight": "--c2-theme--font-weight-semibold",
558
+ "--c2-date-selector__navigation__hover--background": "--c2-theme--color-surface-container",
559
+ "--c2-date-selector__focus--outline": "--c2-theme--focus-ring",
560
+ "--c2-date-selector__disabled--opacity": "--c2-theme--disabled-opacity",
525
561
  "--c2-details--border-top": "--c2-theme--border",
526
562
  "--c2-details--border-right": "--c2-theme--border",
527
563
  "--c2-details--border-bottom": "--c2-theme--border",
@@ -683,6 +719,27 @@
683
719
  "--c2-navigation-menu-link__icon--color": "--c2-theme--color-on-surface-variant",
684
720
  "--c2-navigation-menu-link__focus--outline": "--c2-theme--focus-ring",
685
721
  "--c2-navigation-menu-link__disabled--opacity": "--c2-theme--disabled-opacity",
722
+ "--c2-number-input--border": "--c2-theme--border",
723
+ "--c2-number-input--border-radius": "--c2-theme--radius-md",
724
+ "--c2-number-input--color": "--c2-theme--color-on-surface",
725
+ "--c2-number-input--background": "--c2-theme--color-surface",
726
+ "--c2-number-input--font-size": "--c2-theme--font-size-md",
727
+ "--c2-number-input__placeholder--color": "--c2-theme--color-on-surface-variant",
728
+ "--c2-number-input__hover--border": "--c2-theme--color-outline-strong",
729
+ "--c2-number-input__focus--border": "--c2-theme--color-primary",
730
+ "--c2-number-input__focus--outline": "--c2-theme--focus-ring",
731
+ "--c2-number-input__error--border": "--c2-theme--color-error",
732
+ "--c2-number-input__read-only--background": "--c2-theme--color-surface-container-low",
733
+ "--c2-number-input__disabled--opacity": "--c2-theme--disabled-opacity",
734
+ "--c2-number-input__stepper--border-left": "--c2-theme--color-outline-variant",
735
+ "--c2-number-input__stepper--color": "--c2-theme--color-on-surface-variant",
736
+ "--c2-number-input__stepper__hover--color": "--c2-theme--color-on-surface",
737
+ "--c2-number-input__stepper__hover--background": "--c2-theme--color-surface-container",
738
+ "--c2-number-input__adornment--color": "--c2-theme--color-on-surface-variant",
739
+ "--c2-number-input__adornment--font-size": "--c2-theme--font-size-md",
740
+ "--c2-number-input__supporting-text--font-size": "--c2-theme--font-size-sm",
741
+ "--c2-number-input__supporting-text--color": "--c2-theme--color-on-surface-variant",
742
+ "--c2-number-input__supporting-text__error--color": "--c2-theme--color-error",
686
743
  "--c2-overlay--transition-duration": "--c2-theme--motion-scale",
687
744
  "--c2-pagination__item--color": "--c2-theme--color-on-surface",
688
745
  "--c2-pagination__item--border-radius": "--c2-theme--radius-lg",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c2n/theme",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "description": "Design tokens (--c2-theme--*) and a generated base theme that maps every @c2n component CSS variable onto them",
5
5
  "type": "module",
6
6
  "main": "dist/tokens.js",
@@ -54,6 +54,9 @@
54
54
  "build": {
55
55
  "dependencies": [
56
56
  "type-check",
57
+ "../../components/number-input:build",
58
+ "../../components/date-input:build",
59
+ "../../components/date-selector:build",
57
60
  "../../components/chart:build",
58
61
  "../../components/autocomplete:build",
59
62
  "../../components/header:build",
@@ -117,5 +120,5 @@
117
120
  "@c2n/config": "*",
118
121
  "prettier": "3.9.6"
119
122
  },
120
- "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
123
+ "gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
121
124
  }