@public-ui/theme-default 2.0.0-rc.9 → 2.0.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 (3) hide show
  1. package/dist/index.cjs +32 -57
  2. package/dist/index.mjs +32 -57
  3. package/package.json +10 -10
package/dist/index.cjs CHANGED
@@ -1367,29 +1367,29 @@ const DEFAULT = KoliBri.createTheme("default", {
1367
1367
  }
1368
1368
  `,
1369
1369
  "KOL-HEADING": css`
1370
- h1,
1371
- h2,
1372
- h3,
1373
- h4,
1374
- h5,
1375
- h6 {
1370
+ .headline-h1,
1371
+ .headline-h2,
1372
+ .headline-h3,
1373
+ .headline-h4,
1374
+ .headline-h5,
1375
+ .headline-h6 {
1376
1376
  color: inherit;
1377
1377
  font-style: normal;
1378
1378
  }
1379
- h1,
1380
- h2,
1381
- h3 {
1379
+ .headline-h1,
1380
+ .headline-h2,
1381
+ .headline-h3 {
1382
1382
  font-weight: 700;
1383
1383
  }
1384
- h1 {
1384
+ .headline-h1 {
1385
1385
  font-size: 1.5rem;
1386
1386
  line-height: 1.75rem;
1387
1387
  }
1388
- h2 {
1388
+ .headline-h2 {
1389
1389
  font-size: 1.25rem;
1390
1390
  line-height: 1.75rem;
1391
1391
  }
1392
- h3 {
1392
+ .headline-h3 {
1393
1393
  font-size: 1.125rem;
1394
1394
  line-height: 1.5rem;
1395
1395
  }
@@ -1972,6 +1972,9 @@ const DEFAULT = KoliBri.createTheme("default", {
1972
1972
  :host kol-input.button {
1973
1973
  gap: 0.4rem 0;
1974
1974
  }
1975
+ .checkbox-container {
1976
+ justify-content: flex-start;
1977
+ }
1975
1978
  :host kol-input > div.input {
1976
1979
  display: inherit;
1977
1980
  min-height: var(--a11y-min-size);
@@ -2040,13 +2043,6 @@ const DEFAULT = KoliBri.createTheme("default", {
2040
2043
  cursor: pointer;
2041
2044
  transition: 0.5s;
2042
2045
  }
2043
- :host kol-input input[type='checkbox'].kol-disabled:before {
2044
- cursor: not-allowed;
2045
- }
2046
- :host kol-input input[type='checkbox']:before {
2047
- content: '';
2048
- cursor: pointer;
2049
- }
2050
2046
  :host kol-input input[type='checkbox']:checked {
2051
2047
  background-color: var(--color-primary);
2052
2048
  border-color: var(--color-primary);
@@ -2057,51 +2053,23 @@ const DEFAULT = KoliBri.createTheme("default", {
2057
2053
  min-width: calc(6 * 0.25rem);
2058
2054
  width: calc(6 * 0.25rem);
2059
2055
  }
2060
- :host kol-input.default input[type='checkbox']:before {
2061
- border-radius: 1.5em;
2062
- background-color: transparent;
2063
- display: block;
2064
- height: calc(6 * 0.25rem);
2065
- position: relative;
2066
- width: calc(6 * 0.25rem);
2067
- }
2068
- :host kol-input.default input[type='checkbox']:checked:before {
2069
- border-right-width: 3px;
2070
- border-bottom-width: 3px;
2071
- left: calc(1.5 * 0.25rem - 2px);
2072
- top: calc(2.85 * 0.25rem - 2px);
2073
- transform: rotate(40deg) translate(-50%, -50%);
2074
- background-color: transparent;
2075
- border-width: 0px 3px 3px 0px;
2076
- border-color: white;
2077
- border-radius: 1px;
2078
- border-style: solid;
2079
- height: calc(3 * 0.25rem);
2080
- width: calc(1.5 * 0.25rem);
2081
- }
2082
2056
  :host kol-input.default input[type='checkbox']:indeterminate {
2083
2057
  background-color: var(--color-primary);
2084
2058
  }
2085
- :host kol-input.default input[type='checkbox']:indeterminate:before {
2086
- background-color: var(--color-light);
2087
- height: 0.125rem;
2088
- top: 0.6rem;
2089
- left: 0.25rem;
2090
- width: calc(3 * 0.25rem);
2091
- transform: inherit;
2092
- }
2093
- :host kol-input.default input[type='checkbox']:checked:indeterminate:before {
2094
- border-width: 0px 1px 1px 0px;
2059
+ :host kol-input.default .icon {
2060
+ color: var(--color-light);
2061
+ margin-left: 0.25rem;
2095
2062
  }
2063
+
2096
2064
  :host kol-input.switch input[type='checkbox'] {
2097
- min-width: 3.5em;
2098
- width: 3.5em;
2099
2065
  background-color: var(--color-subtle);
2066
+ border-radius: 1.25em;
2100
2067
  border-width: 0;
2068
+ display: block;
2101
2069
  height: 1.5em;
2102
- border-radius: 1.25em;
2103
- display: inline-block;
2070
+ min-width: 3.5em;
2104
2071
  position: relative;
2072
+ width: 3.5em;
2105
2073
  }
2106
2074
  :host kol-input.switch input[type='checkbox']:before {
2107
2075
  width: 1.25em;
@@ -2128,17 +2096,24 @@ const DEFAULT = KoliBri.createTheme("default", {
2128
2096
  left: 2px;
2129
2097
  }
2130
2098
 
2131
- &:has(input:checked) .icon {
2099
+ &.checked .icon {
2132
2100
  transform: translate(2em, -50%);
2133
2101
  }
2134
2102
 
2135
- &:has(input:indeterminate) .icon {
2103
+ &.indeterminate .icon {
2136
2104
  transform: translate(1em, -50%);
2137
2105
  }
2138
2106
  }
2139
2107
  :host .disabled {
2140
2108
  opacity: 0.33;
2141
2109
  }
2110
+ .button:focus-within {
2111
+ border-radius: var(--border-radius);
2112
+ outline-color: var(--color-primary-variant);
2113
+ outline-offset: 2px;
2114
+ outline-style: solid;
2115
+ outline-width: calc(var(--border-width) * 2);
2116
+ }
2142
2117
  `,
2143
2118
  "KOL-INPUT-RADIO": css`
2144
2119
  label {
package/dist/index.mjs CHANGED
@@ -1365,29 +1365,29 @@ const DEFAULT = KoliBri.createTheme("default", {
1365
1365
  }
1366
1366
  `,
1367
1367
  "KOL-HEADING": css`
1368
- h1,
1369
- h2,
1370
- h3,
1371
- h4,
1372
- h5,
1373
- h6 {
1368
+ .headline-h1,
1369
+ .headline-h2,
1370
+ .headline-h3,
1371
+ .headline-h4,
1372
+ .headline-h5,
1373
+ .headline-h6 {
1374
1374
  color: inherit;
1375
1375
  font-style: normal;
1376
1376
  }
1377
- h1,
1378
- h2,
1379
- h3 {
1377
+ .headline-h1,
1378
+ .headline-h2,
1379
+ .headline-h3 {
1380
1380
  font-weight: 700;
1381
1381
  }
1382
- h1 {
1382
+ .headline-h1 {
1383
1383
  font-size: 1.5rem;
1384
1384
  line-height: 1.75rem;
1385
1385
  }
1386
- h2 {
1386
+ .headline-h2 {
1387
1387
  font-size: 1.25rem;
1388
1388
  line-height: 1.75rem;
1389
1389
  }
1390
- h3 {
1390
+ .headline-h3 {
1391
1391
  font-size: 1.125rem;
1392
1392
  line-height: 1.5rem;
1393
1393
  }
@@ -1970,6 +1970,9 @@ const DEFAULT = KoliBri.createTheme("default", {
1970
1970
  :host kol-input.button {
1971
1971
  gap: 0.4rem 0;
1972
1972
  }
1973
+ .checkbox-container {
1974
+ justify-content: flex-start;
1975
+ }
1973
1976
  :host kol-input > div.input {
1974
1977
  display: inherit;
1975
1978
  min-height: var(--a11y-min-size);
@@ -2038,13 +2041,6 @@ const DEFAULT = KoliBri.createTheme("default", {
2038
2041
  cursor: pointer;
2039
2042
  transition: 0.5s;
2040
2043
  }
2041
- :host kol-input input[type='checkbox'].kol-disabled:before {
2042
- cursor: not-allowed;
2043
- }
2044
- :host kol-input input[type='checkbox']:before {
2045
- content: '';
2046
- cursor: pointer;
2047
- }
2048
2044
  :host kol-input input[type='checkbox']:checked {
2049
2045
  background-color: var(--color-primary);
2050
2046
  border-color: var(--color-primary);
@@ -2055,51 +2051,23 @@ const DEFAULT = KoliBri.createTheme("default", {
2055
2051
  min-width: calc(6 * 0.25rem);
2056
2052
  width: calc(6 * 0.25rem);
2057
2053
  }
2058
- :host kol-input.default input[type='checkbox']:before {
2059
- border-radius: 1.5em;
2060
- background-color: transparent;
2061
- display: block;
2062
- height: calc(6 * 0.25rem);
2063
- position: relative;
2064
- width: calc(6 * 0.25rem);
2065
- }
2066
- :host kol-input.default input[type='checkbox']:checked:before {
2067
- border-right-width: 3px;
2068
- border-bottom-width: 3px;
2069
- left: calc(1.5 * 0.25rem - 2px);
2070
- top: calc(2.85 * 0.25rem - 2px);
2071
- transform: rotate(40deg) translate(-50%, -50%);
2072
- background-color: transparent;
2073
- border-width: 0px 3px 3px 0px;
2074
- border-color: white;
2075
- border-radius: 1px;
2076
- border-style: solid;
2077
- height: calc(3 * 0.25rem);
2078
- width: calc(1.5 * 0.25rem);
2079
- }
2080
2054
  :host kol-input.default input[type='checkbox']:indeterminate {
2081
2055
  background-color: var(--color-primary);
2082
2056
  }
2083
- :host kol-input.default input[type='checkbox']:indeterminate:before {
2084
- background-color: var(--color-light);
2085
- height: 0.125rem;
2086
- top: 0.6rem;
2087
- left: 0.25rem;
2088
- width: calc(3 * 0.25rem);
2089
- transform: inherit;
2090
- }
2091
- :host kol-input.default input[type='checkbox']:checked:indeterminate:before {
2092
- border-width: 0px 1px 1px 0px;
2057
+ :host kol-input.default .icon {
2058
+ color: var(--color-light);
2059
+ margin-left: 0.25rem;
2093
2060
  }
2061
+
2094
2062
  :host kol-input.switch input[type='checkbox'] {
2095
- min-width: 3.5em;
2096
- width: 3.5em;
2097
2063
  background-color: var(--color-subtle);
2064
+ border-radius: 1.25em;
2098
2065
  border-width: 0;
2066
+ display: block;
2099
2067
  height: 1.5em;
2100
- border-radius: 1.25em;
2101
- display: inline-block;
2068
+ min-width: 3.5em;
2102
2069
  position: relative;
2070
+ width: 3.5em;
2103
2071
  }
2104
2072
  :host kol-input.switch input[type='checkbox']:before {
2105
2073
  width: 1.25em;
@@ -2126,17 +2094,24 @@ const DEFAULT = KoliBri.createTheme("default", {
2126
2094
  left: 2px;
2127
2095
  }
2128
2096
 
2129
- &:has(input:checked) .icon {
2097
+ &.checked .icon {
2130
2098
  transform: translate(2em, -50%);
2131
2099
  }
2132
2100
 
2133
- &:has(input:indeterminate) .icon {
2101
+ &.indeterminate .icon {
2134
2102
  transform: translate(1em, -50%);
2135
2103
  }
2136
2104
  }
2137
2105
  :host .disabled {
2138
2106
  opacity: 0.33;
2139
2107
  }
2108
+ .button:focus-within {
2109
+ border-radius: var(--border-radius);
2110
+ outline-color: var(--color-primary-variant);
2111
+ outline-offset: 2px;
2112
+ outline-style: solid;
2113
+ outline-width: calc(var(--border-width) * 2);
2114
+ }
2140
2115
  `,
2141
2116
  "KOL-INPUT-RADIO": css`
2142
2117
  label {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/theme-default",
3
- "version": "2.0.0-rc.9",
3
+ "version": "2.0.0",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": "https://github.com/public-ui/kolibri",
@@ -38,18 +38,18 @@
38
38
  "wcag"
39
39
  ],
40
40
  "devDependencies": {
41
- "@public-ui/schema": "2.0.0-rc.9",
42
- "@public-ui/visual-tests": "2.0.0-rc.9",
43
- "@types/node": "ts5.2",
44
- "@typescript-eslint/eslint-plugin": "6.10.0",
45
- "@typescript-eslint/parser": "6.10.0",
46
- "eslint": "8.53.0",
41
+ "@public-ui/schema": "2.0.0",
42
+ "@public-ui/visual-tests": "2.0.0",
43
+ "@types/node": "ts5.3",
44
+ "@typescript-eslint/eslint-plugin": "6.13.1",
45
+ "@typescript-eslint/parser": "6.13.1",
46
+ "eslint": "8.55.0",
47
47
  "eslint-plugin-no-loops": "0.3.0",
48
- "typescript": "5.2.2",
48
+ "typescript": "5.3.2",
49
49
  "unbuild": "1.2.1"
50
50
  },
51
51
  "peerDependencies": {
52
- "@public-ui/components": "2.0.0-rc.9"
52
+ "@public-ui/components": "2.0.0"
53
53
  },
54
54
  "sideEffects": false,
55
55
  "type": "module",
@@ -72,7 +72,7 @@
72
72
  "depcheck": "depcheck --ignore-bin-package --skip-missing --ignores=@types/*",
73
73
  "format": "prettier --check src",
74
74
  "lint": "eslint src && tsc --noemit",
75
- "test": "THEME_MODULE=src/index THEME_EXPORT=DEFAULT kolibri-visual-test theme-snapshots.spec.js",
75
+ "test": "THEME_MODULE=src/index THEME_EXPORT=DEFAULT kolibri-visual-test",
76
76
  "test-update": "THEME_MODULE=src/index THEME_EXPORT=DEFAULT kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
77
77
  }
78
78
  }