refactor: renaming primer theme variables

cadgerfeast · Sep 6, 2024 · c694f29 · c694f29
1 parent f65d6c4
commit c694f29
Show file tree

Hide file tree

Showing 45 changed files with 496 additions and 1,892 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -71,7 +71,6 @@ export default defineConfig({
 						{ text: 'Flash', link: '/guide/components/flash' },
 						{ text: 'Icon', link: '/guide/components/icon' },
 						{ text: 'Keyboard', link: '/guide/components/keyboard' },
-						{ text: 'Layout', link: '/guide/components/layout' },
 						{ text: 'Popover', link: '/guide/components/popover' },
 						{ text: 'Splitter', link: '/guide/components/splitter' },
 						{ text: 'Spinner', link: '/guide/components/spinner' },

diff --git a/docs/src/components/playground/blankslate.vue b/docs/src/components/playground/blankslate.vue
@@ -40,9 +40,6 @@
       width: 60%;
       > sl-blankslate {
         width: 100%;
-        sl-icon {
-          color: var(--pr-cornflower-blue);
-        }
       }
     }
     > sl-form {

diff --git a/docs/src/components/playground/layout.vue b/docs/src/components/playground/layout.vue
diff --git a/docs/src/guide/components/avatar.md b/docs/src/guide/components/avatar.md
@@ -8,13 +8,11 @@ A `sl-avatar` component shows an image that usually represent a user or known en
 
 <Preview>
   <sl-avatar name="John Doe"/>
-  <sl-avatar name="John Doe" background="#4A4052"/>
   <sl-avatar name="Slithe" src="/favicon.svg"/>
 </Preview>
 
 ``` html
 <sl-avatar name="John Doe"/>
-<sl-avatar name="John Doe" background="#4A4052"/>
 <sl-avatar name="Slithe" src="/favicon.svg"/>
 ```
 

diff --git a/docs/src/guide/components/button.md b/docs/src/guide/components/button.md
@@ -32,7 +32,6 @@ Size defaults to `medium`.
 <Preview title="Variants">
   <sl-button>Default</sl-button>
   <sl-button primary>Primary</sl-button>
-  <sl-button outline>Outline</sl-button>
   <sl-button danger>Danger</sl-button>
   <sl-button borderless>Borderless</sl-button>
   <sl-button link>Link</sl-button>
@@ -50,7 +49,6 @@ Size defaults to `medium`.
 <!-- Variants -->
 <sl-button>Default</sl-button>
 <sl-button primary>Primary</sl-button>
-<sl-button outline>Outline</sl-button>
 <sl-button danger>Danger</sl-button>
 <sl-button borderless>Borderless</sl-button>
 <!-- Size -->

diff --git a/docs/src/guide/components/layout.md b/docs/src/guide/components/layout.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/@slithe/primer/package.json b/packages/@slithe/primer/package.json
@@ -40,6 +40,7 @@
     "@types/primer__octicons": "^17.5.0",
     "eslint": "^8.56.0",
     "sass": "^1.69.5",
+    "slithe": "*",
     "vite": "^5.0.11"
   },
   "license": "MIT"

diff --git a/packages/@slithe/primer/src/components/action-divider.scss b/packages/@slithe/primer/src/components/action-divider.scss
@@ -1,15 +1,7 @@
-// Light
-:host([sl-theme=light]) {
-	--sl-action-divider-color: rgba(208, 215, 222, 0.48);
-}
-// Dark
-:host([sl-theme=dark]) {
-	--sl-action-divider-color: rgba(68, 76, 86, 0.48);
-}
 // Action Divider
 li.sl-action-divider {
 	width: 100%;
 	height: 1px;
-	background-color: var(--sl-action-divider-color);
+	background-color: var(--slithe-primer-divider-color);
 	margin: 7px 0 8px 0;
 }
diff --git a/packages/@slithe/primer/src/components/action-group.scss b/packages/@slithe/primer/src/components/action-group.scss
@@ -1,18 +1,10 @@
-// Light
-:host([sl-theme=light]) {
-	--sl-action-group-title-color: rgb(101, 109, 118);
-}
-// Dark
-:host([sl-theme=dark]) {
-	--sl-action-group-title-color: rgb(118, 131, 144);
-}
 // Action Group
 li.sl-action-group {
 	width: 100%;
 	> span.label {
 		padding: 6px 16px;
     font-size: 12px;
     font-weight: 600;
-		color: var(--sl-action-group-title-color);
+		color: var(--slithe-primer-text-color-2);
 	}
 }