@keenmate/pure-css 1.0.0-rc05 → 1.0.0-rc07

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 (21) hide show
  1. package/CHANGELOG.md +113 -0
  2. package/README.md +13 -42
  3. package/dist/css/base.css +20 -10
  4. package/dist/css/pure-css.css +70 -60
  5. package/dist/css/reboot.css +1 -1
  6. package/dist/css/scrollbars.css +4 -4
  7. package/package.json +1 -1
  8. package/src/scss/_base-css-variables.scss +105 -73
  9. package/src/scss/_fit-flyout.scss +4 -4
  10. package/src/scss/_layout-container.scss +3 -3
  11. package/src/scss/_layout-responsive.scss +1 -1
  12. package/src/scss/_navbar-elements.scss +11 -11
  13. package/src/scss/_navbar.scss +2 -2
  14. package/src/scss/_resize-handle.scss +1 -1
  15. package/src/scss/_sidebar-states.scss +6 -6
  16. package/src/scss/_sidebar.scss +31 -23
  17. package/src/scss/reboot.scss +1 -1
  18. package/src/scss/scrollbars.scss +4 -4
  19. package/src/scss/variables/_base.scss +26 -2
  20. package/src/scss/variables/_colors.scss +15 -9
  21. package/src/scss/variables/_components.scss +4 -4
package/dist/css/pure-css.css CHANGED
@@ -91,7 +91,7 @@ body {
91
91
  font-family: var(--base-font-family);
92
92
  font-size: 1.6rem;
93
93
  color: var(--pc-text-color-1);
94
- background-color: var(--pc-main-bg);
94
+ background-color: var(--pc-page-bg);
95
95
  line-height: 1.5;
96
96
  }
97
97
 
@@ -111,14 +111,14 @@ label {
111
111
  }
112
112
 
113
113
  *::-webkit-scrollbar-track {
114
- background: var(--pc-main-bg);
114
+ background: var(--pc-page-bg);
115
115
  border-radius: var(--pc-border-radius-sm);
116
116
  }
117
117
 
118
118
  *::-webkit-scrollbar-thumb {
119
119
  background: var(--pc-border-color);
120
120
  border-radius: var(--pc-border-radius-sm);
121
- border: 1px solid var(--pc-main-bg);
121
+ border: 1px solid var(--pc-page-bg);
122
122
  }
123
123
  *::-webkit-scrollbar-thumb:hover {
124
124
  background: var(--pc-accent);
@@ -128,13 +128,13 @@ label {
128
128
  }
129
129
 
130
130
  *::-webkit-scrollbar-corner {
131
- background: var(--pc-main-bg);
131
+ background: var(--pc-page-bg);
132
132
  }
133
133
 
134
134
  /* Firefox */
135
135
  * {
136
136
  scrollbar-width: thin;
137
- scrollbar-color: var(--pc-border-color) var(--pc-main-bg);
137
+ scrollbar-color: var(--pc-border-color) var(--pc-page-bg);
138
138
  }
139
139
 
140
140
  .pc-row {
@@ -1907,8 +1907,8 @@ label {
1907
1907
  top: 0;
1908
1908
  inset-inline: 0;
1909
1909
  height: 4.8rem;
1910
- background-color: var(--pc-navbar-bg);
1911
- border-bottom: 1px solid var(--pc-navbar-border-color);
1910
+ background-color: var(--pc-navbar-bg, var(--base-main-bg));
1911
+ border-bottom: 1px solid var(--pc-navbar-border-color, var(--base-border-color));
1912
1912
  z-index: 4000;
1913
1913
  display: flex;
1914
1914
  align-items: center;
@@ -1997,14 +1997,14 @@ body.pc-container-2xl .pc-navbar {
1997
1997
  margin: 0;
1998
1998
  font-size: 1.8rem;
1999
1999
  font-weight: 600;
2000
- color: var(--pc-navbar-text);
2000
+ color: var(--pc-navbar-text, var(--base-text-color-1));
2001
2001
  white-space: nowrap;
2002
2002
  }
2003
2003
  .pc-app-header__version {
2004
2004
  margin-inline-start: 0.4rem;
2005
2005
  font-size: 1.2rem;
2006
2006
  font-weight: 400;
2007
- color: var(--pc-navbar-text-secondary);
2007
+ color: var(--pc-navbar-text-secondary, var(--base-text-color-2));
2008
2008
  }
2009
2009
 
2010
2010
  .pc-navbar__burger {
@@ -2030,7 +2030,7 @@ body.pc-container-2xl .pc-navbar {
2030
2030
  }
2031
2031
  .pc-navmenu > ul > li > a {
2032
2032
  text-decoration: none;
2033
- color: var(--pc-navbar-text-secondary);
2033
+ color: var(--pc-navbar-text-secondary, var(--base-text-color-2));
2034
2034
  font-weight: 500;
2035
2035
  padding: 0.4rem 0.8rem;
2036
2036
  border-radius: var(--pc-border-radius);
@@ -2040,11 +2040,11 @@ body.pc-container-2xl .pc-navbar {
2040
2040
  align-items: center;
2041
2041
  }
2042
2042
  .pc-navmenu > ul > li > a:hover {
2043
- color: var(--pc-navbar-text);
2043
+ color: var(--pc-navbar-text, var(--base-text-color-1));
2044
2044
  background-color: color-mix(in srgb, currentColor 12%, transparent);
2045
2045
  }
2046
2046
  .pc-navmenu > ul > li.pc-navmenu__item--active > a, .pc-navmenu > ul > li.pc-navmenu__item--active > a:hover {
2047
- color: var(--pc-navbar-text);
2047
+ color: var(--pc-navbar-text, var(--base-text-color-1));
2048
2048
  background-color: color-mix(in srgb, currentColor 22%, transparent);
2049
2049
  font-weight: 600;
2050
2050
  }
@@ -2070,7 +2070,7 @@ body.pc-container-2xl .pc-navbar {
2070
2070
  top: 100%;
2071
2071
  inset-inline-start: 0;
2072
2072
  min-width: 19.2rem;
2073
- background-color: var(--pc-card-bg);
2073
+ background-color: var(--pc-card-bg, var(--base-main-bg));
2074
2074
  border: 1px solid var(--pc-border-color);
2075
2075
  border-radius: var(--pc-border-radius);
2076
2076
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -2194,7 +2194,7 @@ body.pc-container-2xl .pc-navbar {
2194
2194
  margin: 0;
2195
2195
  font-size: 1.8rem;
2196
2196
  font-weight: 600;
2197
- color: var(--pc-navbar-text);
2197
+ color: var(--pc-navbar-text, var(--base-text-color-1));
2198
2198
  white-space: nowrap;
2199
2199
  overflow: hidden;
2200
2200
  text-overflow: ellipsis;
@@ -2218,7 +2218,7 @@ body.pc-container-2xl .pc-navbar {
2218
2218
  .burger-menu span {
2219
2219
  width: 100%;
2220
2220
  height: 2px;
2221
- background-color: var(--pc-navbar-text);
2221
+ background-color: var(--pc-navbar-text, var(--base-text-color-1));
2222
2222
  border-radius: var(--pc-border-radius);
2223
2223
  transition: all 0.15s ease-out;
2224
2224
  transform-origin: center;
@@ -2248,15 +2248,15 @@ body.pc-container-2xl .pc-navbar {
2248
2248
  gap: 0.8rem;
2249
2249
  }
2250
2250
  .theme-switcher label {
2251
- color: var(--pc-navbar-text-secondary);
2251
+ color: var(--pc-navbar-text-secondary, var(--base-text-color-2));
2252
2252
  font-size: 1.4rem;
2253
2253
  }
2254
2254
  .theme-switcher select {
2255
2255
  padding: 0.4rem 0.8rem;
2256
2256
  border: 1px solid var(--pc-border-color);
2257
2257
  border-radius: var(--pc-border-radius);
2258
- background-color: var(--pc-navbar-bg);
2259
- color: var(--pc-navbar-text);
2258
+ background-color: var(--pc-navbar-bg, var(--base-main-bg));
2259
+ color: var(--pc-navbar-text, var(--base-text-color-1));
2260
2260
  font-size: 1.4rem;
2261
2261
  }
2262
2262
  .theme-switcher select:focus {
@@ -2287,7 +2287,7 @@ body.pc-container-2xl .pc-navbar {
2287
2287
  }
2288
2288
 
2289
2289
  .pc-layout__sidebar {
2290
- background-color: var(--pc-sidebar-bg);
2290
+ background-color: var(--pc-sidebar-bg, var(--base-page-bg));
2291
2291
  border-inline-end: 1px solid var(--pc-border-color);
2292
2292
  flex-shrink: 0;
2293
2293
  position: relative;
@@ -2314,7 +2314,7 @@ body.pc-container-2xl .pc-navbar {
2314
2314
  width: 14px;
2315
2315
  height: 44px;
2316
2316
  border-radius: min(var(--pc-border-radius-lg), 4px);
2317
- background-color: var(--pc-card-bg);
2317
+ background-color: var(--pc-card-bg, var(--base-main-bg));
2318
2318
  border: 2px solid var(--pc-border-color);
2319
2319
  color: var(--pc-text-color-2);
2320
2320
  font-size: 1.8rem;
@@ -2379,7 +2379,7 @@ body.pc-layout--sticky .pc-layout__sidebar {
2379
2379
  font-weight: 600;
2380
2380
  text-transform: uppercase;
2381
2381
  letter-spacing: 0.05em;
2382
- color: var(--pc-sidebar-text-secondary);
2382
+ color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
2383
2383
  user-select: none;
2384
2384
  }
2385
2385
  .pc-sidebar__section:first-child {
@@ -2398,7 +2398,7 @@ body.pc-layout--sticky .pc-layout__sidebar {
2398
2398
  align-items: center;
2399
2399
  gap: 1.2rem;
2400
2400
  padding: 0.8rem 1.6rem;
2401
- color: var(--pc-sidebar-text-secondary);
2401
+ color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
2402
2402
  text-decoration: none;
2403
2403
  font-weight: 500;
2404
2404
  border-inline-end: 3px solid transparent;
@@ -2407,7 +2407,7 @@ body.loaded .pc-sidebar__link {
2407
2407
  transition: all 0.1s ease-out;
2408
2408
  }
2409
2409
  .pc-sidebar__link:hover {
2410
- color: var(--pc-sidebar-text);
2410
+ color: var(--pc-sidebar-text, var(--base-text-color-1));
2411
2411
  background-color: var(--pc-accent-light);
2412
2412
  }
2413
2413
  .pc-sidebar__link--active {
@@ -2423,9 +2423,9 @@ body.loaded .pc-sidebar__link {
2423
2423
  width: calc(100% - 0.8rem * 2);
2424
2424
  margin: 0.8rem;
2425
2425
  height: 3.5rem;
2426
- padding: 0 1.6rem;
2426
+ padding: 0 1.6rem 0 0.8rem;
2427
2427
  color: var(--pc-text-color-2);
2428
- background-color: var(--pc-input-bg);
2428
+ background-color: var(--pc-input-bg, var(--base-input-bg));
2429
2429
  border: 1px solid var(--pc-border-color);
2430
2430
  border-radius: var(--pc-border-radius);
2431
2431
  text-align: start;
@@ -2440,9 +2440,9 @@ body.loaded .pc-sidebar__search {
2440
2440
  }
2441
2441
  .pc-sidebar__search:hover {
2442
2442
  border-color: #007bff;
2443
- color: var(--pc-sidebar-text);
2443
+ color: var(--pc-sidebar-text, var(--base-text-color-1));
2444
2444
  }
2445
- .pc-layout__sidebar--icon-collapse .pc-sidebar__search {
2445
+ .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__search {
2446
2446
  width: auto;
2447
2447
  margin: 0;
2448
2448
  padding: 0.8rem 1.6rem;
@@ -2475,7 +2475,7 @@ body.loaded .pc-sidebar__search {
2475
2475
  border: none;
2476
2476
  outline: none;
2477
2477
  background: transparent;
2478
- color: var(--pc-sidebar-text);
2478
+ color: var(--pc-sidebar-text, var(--base-text-color-1));
2479
2479
  font: inherit;
2480
2480
  padding: 0;
2481
2481
  }
@@ -2486,10 +2486,10 @@ body.loaded .pc-sidebar__search {
2486
2486
  .pc-sidebar__search--input .pc-sidebar__search-field::-webkit-search-decoration, .pc-sidebar__search--input .pc-sidebar__search-field::-webkit-search-cancel-button {
2487
2487
  -webkit-appearance: none;
2488
2488
  }
2489
- .pc-layout__sidebar--icon-collapse .pc-sidebar__search--input {
2489
+ .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__search--input {
2490
2490
  justify-content: center;
2491
2491
  }
2492
- .pc-layout__sidebar--icon-collapse .pc-sidebar__search--input .pc-sidebar__search-field {
2492
+ .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__search--input .pc-sidebar__search-field {
2493
2493
  display: none;
2494
2494
  }
2495
2495
  .pc-sidebar__toggle {
@@ -2497,7 +2497,7 @@ body.loaded .pc-sidebar__search {
2497
2497
  align-items: center;
2498
2498
  gap: 1.2rem;
2499
2499
  padding: 0.8rem 1.6rem;
2500
- color: var(--pc-sidebar-text-secondary);
2500
+ color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
2501
2501
  background: none;
2502
2502
  border: none;
2503
2503
  width: 100%;
@@ -2509,7 +2509,7 @@ body.loaded .pc-sidebar__toggle {
2509
2509
  transition: all 0.1s ease-out;
2510
2510
  }
2511
2511
  .pc-sidebar__toggle:hover {
2512
- color: var(--pc-sidebar-text);
2512
+ color: var(--pc-sidebar-text, var(--base-text-color-1));
2513
2513
  background-color: var(--pc-accent-light);
2514
2514
  }
2515
2515
  .pc-sidebar__toggle--active {
@@ -2542,7 +2542,7 @@ body.loaded .pc-sidebar__label {
2542
2542
  margin: 0;
2543
2543
  padding: 0;
2544
2544
  display: none;
2545
- background-color: var(--pc-sidebar-submenu-bg);
2545
+ background-color: var(--pc-sidebar-submenu-bg, var(--base-subtle-bg));
2546
2546
  }
2547
2547
  .pc-sidebar__submenu--open {
2548
2548
  display: block;
@@ -2553,11 +2553,11 @@ body.loaded .pc-sidebar__label {
2553
2553
  border-inline-end: 2px solid transparent;
2554
2554
  }
2555
2555
  .pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__link:hover {
2556
- background-color: var(--pc-sidebar-submenu-hover-bg);
2556
+ background-color: var(--pc-sidebar-submenu-hover-bg, var(--base-subtle-bg));
2557
2557
  }
2558
2558
  .pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__link--active {
2559
- background-color: var(--pc-sidebar-submenu-active-bg);
2560
- color: var(--pc-sidebar-submenu-active-text);
2559
+ background-color: var(--pc-sidebar-submenu-active-bg, var(--base-subtle-bg));
2560
+ color: var(--pc-sidebar-submenu-active-text, var(--base-text-color-1));
2561
2561
  border-inline-end-color: var(--pc-accent);
2562
2562
  }
2563
2563
  .pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__toggle {
@@ -2637,7 +2637,7 @@ body.loaded .pc-sidebar__chevron {
2637
2637
  top: 0;
2638
2638
  bottom: 0;
2639
2639
  padding: 0.8rem 1.6rem;
2640
- background-color: var(--pc-sidebar-bg);
2640
+ background-color: var(--pc-sidebar-bg, var(--base-page-bg));
2641
2641
  border: 1px solid var(--pc-border-color);
2642
2642
  border-inline-start: none;
2643
2643
  border-start-start-radius: 0;
@@ -2662,7 +2662,7 @@ body.loaded .pc-sidebar__chevron {
2662
2662
  margin: 0;
2663
2663
  padding: 0;
2664
2664
  list-style: none;
2665
- background-color: var(--pc-sidebar-submenu-bg);
2665
+ background-color: var(--pc-sidebar-submenu-bg, var(--base-subtle-bg));
2666
2666
  border: 1px solid var(--pc-border-color);
2667
2667
  border-inline-start: none;
2668
2668
  border-start-start-radius: 0;
@@ -2690,14 +2690,14 @@ body.loaded .pc-sidebar__chevron {
2690
2690
  .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__toggle:hover,
2691
2691
  .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__link:hover,
2692
2692
  .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__toggle:hover {
2693
- background-color: var(--pc-sidebar-submenu-hover-bg);
2693
+ background-color: var(--pc-sidebar-submenu-hover-bg, var(--base-subtle-bg));
2694
2694
  }
2695
2695
  .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__link--active,
2696
2696
  .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__toggle--active,
2697
2697
  .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__link--active,
2698
2698
  .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__toggle--active {
2699
- background-color: var(--pc-sidebar-submenu-active-bg);
2700
- color: var(--pc-sidebar-submenu-active-text);
2699
+ background-color: var(--pc-sidebar-submenu-active-bg, var(--base-subtle-bg));
2700
+ color: var(--pc-sidebar-submenu-active-text, var(--base-text-color-1));
2701
2701
  }
2702
2702
  .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__icon,
2703
2703
  .sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__icon {
@@ -2739,7 +2739,7 @@ body.loaded .pc-sidebar__chevron {
2739
2739
  margin: 0;
2740
2740
  padding: 0;
2741
2741
  list-style: none;
2742
- background-color: var(--pc-sidebar-submenu-bg);
2742
+ background-color: var(--pc-sidebar-submenu-bg, var(--base-subtle-bg));
2743
2743
  border: 1px solid var(--pc-border-color);
2744
2744
  border-inline-start: none;
2745
2745
  border-start-start-radius: 0;
@@ -2806,7 +2806,7 @@ body.pc-layout--sticky {
2806
2806
  .pc-layout {
2807
2807
  max-width: 100%;
2808
2808
  margin: 4.8rem auto 0;
2809
- background-color: var(--pc-main-bg);
2809
+ background-color: var(--pc-page-bg);
2810
2810
  overflow: visible;
2811
2811
  display: flex;
2812
2812
  flex-direction: column;
@@ -2881,8 +2881,8 @@ body.pc-layout--sticky .pc-layout__inner {
2881
2881
 
2882
2882
  .pc-layout__footer {
2883
2883
  min-height: 4.8rem;
2884
- background-color: var(--pc-footer-bg);
2885
- border-top: 1px solid var(--pc-footer-border-color);
2884
+ background-color: var(--pc-footer-bg, var(--base-main-bg));
2885
+ border-top: 1px solid var(--pc-footer-border-color, var(--base-border-color));
2886
2886
  display: flex;
2887
2887
  align-items: center;
2888
2888
  padding: 0.4rem 1.6rem;
@@ -2964,7 +2964,7 @@ body.pc-layout--sticky .pc-layout__inner {
2964
2964
  bottom: 0;
2965
2965
  width: 90vw;
2966
2966
  z-index: 1050;
2967
- background-color: var(--pc-sidebar-bg);
2967
+ background-color: var(--pc-sidebar-bg, var(--base-page-bg));
2968
2968
  opacity: 1;
2969
2969
  overflow-y: auto;
2970
2970
  overscroll-behavior: contain;
@@ -3063,14 +3063,14 @@ body.pc-layout--sticky .pc-layout__inner {
3063
3063
  cursor: pointer;
3064
3064
  }
3065
3065
  .pc-fit-flyout__trigger:hover {
3066
- background: var(--pc-hover-bg, rgba(0, 0, 0, 0.05));
3066
+ background: var(--pc-hover-bg, var(--base-hover-bg, rgba(0, 0, 0, 0.05)));
3067
3067
  }
3068
3068
  .pc-fit-flyout__trigger:focus-visible {
3069
- outline: 2px solid var(--pc-accent-color);
3069
+ outline: 2px solid var(--pc-accent, var(--base-accent-color));
3070
3070
  outline-offset: 1px;
3071
3071
  }
3072
3072
  .pc-fit-flyout__trigger[aria-expanded=true] {
3073
- background: var(--pc-hover-bg, rgba(0, 0, 0, 0.08));
3073
+ background: var(--pc-hover-bg, var(--base-hover-bg, rgba(0, 0, 0, 0.08)));
3074
3074
  }
3075
3075
 
3076
3076
  .pc-fit-flyout__dots {
@@ -3103,7 +3103,7 @@ body.pc-layout--sticky .pc-layout__inner {
3103
3103
  min-width: 20rem;
3104
3104
  max-width: 32rem;
3105
3105
  padding: 0.8rem;
3106
- background: var(--pc-card-bg);
3106
+ background: var(--pc-card-bg, var(--base-main-bg));
3107
3107
  border: 1px solid var(--pc-border-color);
3108
3108
  border-radius: var(--pc-border-radius);
3109
3109
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -5961,16 +5961,21 @@ body.pc-layout--sticky .pc-layout__inner {
5961
5961
  --base-hover-bg: #e9ecef;
5962
5962
  --base-active-bg: rgb(85.5830753354%, 87.5490196078%, 89.5149638803%);
5963
5963
  --base-disabled-bg: #e9ecef;
5964
- --base-elevated-bg: #f5f5f5;
5964
+ --base-elevated-bg: #f8f9fa;
5965
+ --base-text-inverted: #ffffff;
5965
5966
  --base-border-color: #e1e5e9;
5966
5967
  --base-border: 1px solid #e1e5e9;
5968
+ --base-checkbox-border-color: #e1e5e9;
5967
5969
  --base-input-bg: #ffffff;
5968
5970
  --base-input-color: #495057;
5969
5971
  --base-input-border: 1px solid #ced4da;
5972
+ --base-input-border-color: #ced4da;
5970
5973
  --base-input-border-hover: 1px solid #b8bfc6;
5971
5974
  --base-input-border-focus: 1px solid #007bff;
5972
5975
  --base-input-placeholder-color: #a3b1bf;
5973
5976
  --base-input-bg-disabled: rgba(255, 255, 255, 0.5);
5977
+ --base-input-clear-color: #7a8a99;
5978
+ --base-input-clear-bg-hover: #e9ecef;
5974
5979
  --base-input-size-xs-height: 3.1;
5975
5980
  --base-input-size-sm-height: 3.3;
5976
5981
  --base-input-size-md-height: 3.5;
@@ -5981,7 +5986,9 @@ body.pc-layout--sticky .pc-layout__inner {
5981
5986
  --base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
5982
5987
  --base-tooltip-bg: #2c3e50;
5983
5988
  --base-tooltip-text-color: #ffffff;
5989
+ --base-tooltip-color: #ffffff;
5984
5990
  --base-success-color: #22c55e;
5991
+ --base-success-bg: #22c55e;
5985
5992
  --base-success-color-hover: rgb(10.3896103896%, 60.1986249045%, 28.7242169595%);
5986
5993
  --base-success-bg-light: rgba(34, 197, 94, 0.1);
5987
5994
  --base-success-bg-subtle: rgba(34, 197, 94, 0.08);
@@ -5990,6 +5997,7 @@ body.pc-layout--sticky .pc-layout__inner {
5990
5997
  --base-success-text-light: #d4edda;
5991
5998
  --base-text-on-success: #ffffff;
5992
5999
  --base-danger-color: #ef4444;
6000
+ --base-danger-bg: #ef4444;
5993
6001
  --base-danger-color-hover: rgb(92.1491355163%, 8.2430213465%, 8.2430213465%);
5994
6002
  --base-danger-bg-light: rgba(239, 68, 68, 0.1);
5995
6003
  --base-danger-bg-subtle: rgba(239, 68, 68, 0.08);
@@ -5998,6 +6006,7 @@ body.pc-layout--sticky .pc-layout__inner {
5998
6006
  --base-danger-text-light: #f8d7da;
5999
6007
  --base-text-on-danger: #ffffff;
6000
6008
  --base-warning-color: #f97316;
6009
+ --base-warning-bg: #f97316;
6001
6010
  --base-warning-color-hover: rgb(84.1086225285%, 35.7371400443%, 2.1658872754%);
6002
6011
  --base-warning-bg-light: rgba(249, 115, 22, 0.1);
6003
6012
  --base-warning-bg-subtle: rgba(249, 115, 22, 0.08);
@@ -6036,13 +6045,14 @@ body.pc-layout--sticky .pc-layout__inner {
6036
6045
  --base-border-radius-sm: 0.4;
6037
6046
  --base-border-radius-md: 0.6;
6038
6047
  --base-border-radius-lg: 0.8;
6048
+ --base-rem: 1rem;
6039
6049
  color-scheme: light;
6040
- --pc-main-bg: #f8f9fa;
6041
- --pc-page-bg: #f8f9fa;
6042
- --pc-subtle-bg: #ffffff;
6043
- --pc-text-color-1: #2c3e50;
6044
- --pc-text-color-2: #6c757d;
6045
- --pc-accent: #007bff;
6050
+ --pc-main-bg: #ffffff;
6051
+ --pc-page-bg: var(--base-page-bg, #f8f9fa);
6052
+ --pc-subtle-bg: #e9ecef;
6053
+ --pc-text-color-1: var(--base-text-color-1, #2c3e50);
6054
+ --pc-text-color-2: var(--base-text-color-2, #6c757d);
6055
+ --pc-accent: var(--base-accent-color, #007bff);
6046
6056
  --pc-accent-hover: rgba(0, 123, 255, 0.12);
6047
6057
  --pc-accent-light: color-mix(in srgb, var(--pc-accent) 5%, transparent);
6048
6058
  --pc-link-color: var(--pc-accent);
@@ -6075,7 +6085,7 @@ body.pc-layout--sticky .pc-layout__inner {
6075
6085
  --pc-color-7-text: #ffffff;
6076
6086
  --pc-color-8-text: #ffffff;
6077
6087
  --pc-color-9-text: #ffffff;
6078
- --pc-border-radius-sm: 2px;
6079
- --pc-border-radius: 4px;
6080
- --pc-border-radius-lg: 8px;
6088
+ --pc-border-radius-sm: calc(var(--base-border-radius-sm, 0.4) * 1rem);
6089
+ --pc-border-radius: calc(var(--base-border-radius-md, 0.6) * 1rem);
6090
+ --pc-border-radius-lg: calc(var(--base-border-radius-lg, 0.8) * 1rem);
6081
6091
  }
package/dist/css/reboot.css CHANGED
@@ -80,7 +80,7 @@ body {
80
80
  font-family: var(--base-font-family);
81
81
  font-size: 1.6rem;
82
82
  color: var(--pc-text-color-1);
83
- background-color: var(--pc-main-bg);
83
+ background-color: var(--pc-page-bg);
84
84
  line-height: 1.5;
85
85
  }
86
86
 
package/dist/css/scrollbars.css CHANGED
@@ -5,14 +5,14 @@
5
5
  }
6
6
 
7
7
  *::-webkit-scrollbar-track {
8
- background: var(--pc-main-bg);
8
+ background: var(--pc-page-bg);
9
9
  border-radius: var(--pc-border-radius-sm);
10
10
  }
11
11
 
12
12
  *::-webkit-scrollbar-thumb {
13
13
  background: var(--pc-border-color);
14
14
  border-radius: var(--pc-border-radius-sm);
15
- border: 1px solid var(--pc-main-bg);
15
+ border: 1px solid var(--pc-page-bg);
16
16
  }
17
17
  *::-webkit-scrollbar-thumb:hover {
18
18
  background: var(--pc-accent);
@@ -22,11 +22,11 @@
22
22
  }
23
23
 
24
24
  *::-webkit-scrollbar-corner {
25
- background: var(--pc-main-bg);
25
+ background: var(--pc-page-bg);
26
26
  }
27
27
 
28
28
  /* Firefox */
29
29
  * {
30
30
  scrollbar-width: thin;
31
- scrollbar-color: var(--pc-border-color) var(--pc-main-bg);
31
+ scrollbar-color: var(--pc-border-color) var(--pc-page-bg);
32
32
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@keenmate/pure-css",
3
- "version": "1.0.0-rc05",
3
+ "version": "1.0.0-rc07",
4
4
  "description": "The KeenMate CSS foundation — --base-* theming contract, PureCSS grid and utility classes. Extracted from pure-admin-core so docs sites, standalone pages and every web/svelte component share one theming layer.",
5
5
  "style": "dist/css/pure-css.css",
6
6
  "exports": {